├── .circleci └── config.yml ├── .gitignore ├── .yo ├── CNAME ├── README.md ├── assets ├── 0.174d3e3.bundle.js ├── 1.174d3e3.bundle.js ├── 10.174d3e3.bundle.js ├── 11.174d3e3.bundle.js ├── 12.174d3e3.bundle.js ├── 13.174d3e3.bundle.js ├── 14.174d3e3.bundle.js ├── 15.174d3e3.bundle.js ├── 16.174d3e3.bundle.js ├── 17.174d3e3.bundle.js ├── 18.174d3e3.bundle.js ├── 19.174d3e3.bundle.js ├── 2.174d3e3.bundle.js ├── 20.174d3e3.bundle.js ├── 21.174d3e3.bundle.js ├── 22.174d3e3.bundle.js ├── 23.174d3e3.bundle.js ├── 24.174d3e3.bundle.js ├── 25.174d3e3.bundle.js ├── 26.174d3e3.bundle.js ├── 27.174d3e3.bundle.js ├── 28.174d3e3.bundle.js ├── 29.174d3e3.bundle.js ├── 3.174d3e3.bundle.js ├── 30.174d3e3.bundle.js ├── 31.174d3e3.bundle.js ├── 32.174d3e3.bundle.js ├── 33.174d3e3.bundle.js ├── 34.174d3e3.bundle.js ├── 35.174d3e3.bundle.js ├── 36.174d3e3.bundle.js ├── 37.174d3e3.bundle.js ├── 38.174d3e3.bundle.js ├── 39.174d3e3.bundle.js ├── 4.174d3e3.bundle.js ├── 40.174d3e3.bundle.js ├── 41.174d3e3.bundle.js ├── 42.174d3e3.bundle.js ├── 43.174d3e3.bundle.js ├── 44.174d3e3.bundle.js ├── 45.174d3e3.bundle.js ├── 46.174d3e3.bundle.js ├── 47.174d3e3.bundle.js ├── 48.174d3e3.bundle.js ├── 49.174d3e3.bundle.js ├── 5.174d3e3.bundle.js ├── 50.174d3e3.bundle.js ├── 51.174d3e3.bundle.js ├── 52.174d3e3.bundle.js ├── 53.174d3e3.bundle.js ├── 54.174d3e3.bundle.js ├── 55.174d3e3.bundle.js ├── 9.174d3e3.bundle.js ├── dagre.15783da.bundle.worker.js ├── lib.174d3e3.bundle.js ├── main.174d3e3.bundle.js ├── push.nginx.conf ├── stats.json ├── vendor.174d3e3.bundle.js └── worker.fe6f7bb.bundle.worker.js ├── babel.config.js ├── compile.sh ├── data ├── env └── stock.json ├── google5e6918457f15c231.html ├── index.html ├── index.tpl ├── package.json ├── resource └── audio │ └── clock.mp3 ├── screen.sh ├── service-worker.js ├── simple.js ├── src ├── client.js ├── i13n.js ├── ui │ ├── molecules │ │ ├── HeaderLink.jsx │ │ ├── Link.jsx │ │ └── Menu.jsx │ ├── organisms │ │ ├── AjaxDownload.example.jsx │ │ ├── AlertsNotifier.example.jsx │ │ ├── Animation.example.jsx │ │ ├── AnimationChangeStyle.example.jsx │ │ ├── AnimationDelay.example.jsx │ │ ├── AnimationReplace.example.jsx │ │ ├── AsciiDoc.example.jsx │ │ ├── CarouselAnimation.example.jsx │ │ ├── CarouselAnimationHideThumb.example.jsx │ │ ├── CarouselHorizontalScroll.example.jsx │ │ ├── Checkbox.example.jsx │ │ ├── CodeEditor.example.jsx │ │ ├── CodeExample.example.jsx │ │ ├── CommandPalette.example.jsx │ │ ├── ConstraintForm.example.jsx │ │ ├── D3AreaChart.example.jsx │ │ ├── D3BarChart.example.jsx │ │ ├── D3LineChart.example.jsx │ │ ├── D3PieChart.example.jsx │ │ ├── D3Uml.example.jsx │ │ ├── D3UmlPerf.example.jsx │ │ ├── Dropzone.example.jsx │ │ ├── ErrorForm.example.jsx │ │ ├── FBLike.example.jsx │ │ ├── FBPage.example.jsx │ │ ├── FixedDataTableList.example.jsx │ │ ├── FullScreen.example.jsx │ │ ├── GrapesJs.example.jsx │ │ ├── GridList.example.jsx │ │ ├── HTMLToCanvans.example.jsx │ │ ├── HtmlTableList.example.jsx │ │ ├── PageLoadProgressHandler.example.jsx │ │ ├── PageLoadProgressHandlerWithAjax.example.jsx │ │ ├── Pagination.example.jsx │ │ ├── ParallaxBackgroundImage.example.jsx │ │ ├── Popup.example.jsx │ │ ├── QQVideo.example.jsx │ │ ├── QueryToJSON.jsx │ │ ├── RTE.example.jsx │ │ ├── RadioGroup.example.jsx │ │ ├── ReactVirtualizedTableList.example.jsx │ │ ├── ReshowMessage.example.jsx │ │ ├── SelectFilter.example.jsx │ │ ├── Spotlight.example.jsx │ │ ├── StockChart.example.jsx │ │ ├── Storage.example.jsx │ │ ├── Suggestion.example.jsx │ │ ├── SuggestionWithoutNewItem.example.jsx │ │ ├── TabView.example.jsx │ │ ├── TagHighlight.example.jsx │ │ ├── TagInput.example.jsx │ │ ├── TomatoApp.jsx │ │ ├── TomatoSortable.jsx │ │ ├── WindowOffset.example.jsx │ │ └── YouTubeRWD.example.jsx │ ├── pages │ │ ├── Animation.jsx │ │ ├── AsciiDoc.jsx │ │ ├── Atoms.jsx │ │ ├── Carousel.jsx │ │ ├── Code.jsx │ │ ├── D3.jsx │ │ ├── D3UmlPerf.jsx │ │ ├── Form.jsx │ │ ├── GrapesJs.jsx │ │ ├── Icons.jsx │ │ ├── JSON.jsx │ │ ├── List.jsx │ │ ├── Molecules.jsx │ │ ├── Organisms.jsx │ │ ├── PDF.jsx │ │ ├── Parallax.jsx │ │ ├── Popup.jsx │ │ ├── Suggestion.jsx │ │ ├── Tomato.jsx │ │ ├── Video.jsx │ │ ├── __tests__ │ │ │ └── AtomsTest.js │ │ └── index.jsx │ └── templates │ │ └── Doc.jsx └── usePage.js ├── webpack.config.mjs ├── workbox-660396c1.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | orbs: 4 | node: circleci/node@5.0.1 5 | 6 | jobs: 7 | test: 8 | parameters: 9 | test-dir: 10 | type: string 11 | executor: 12 | name: node/default 13 | steps: 14 | - checkout 15 | - node/install: 16 | node-version: "14" 17 | install-yarn: true 18 | - run: 19 | name: "Display information" 20 | command: | 21 | echo "## Date: " 22 | date 23 | echo "" 24 | echo "## Node Version: " 25 | node -v 26 | echo "" 27 | echo "## NPM Version: " 28 | npm -v 29 | echo "" 30 | echo "## YARN Version: " 31 | yarn -v 32 | - run: 33 | name: Run YARN tests 34 | command: | 35 | npm config set scripts-prepend-node-path auto \ 36 | && yarn --ignore-engines \ 37 | && cd << parameters.test-dir >> \ 38 | && yarn --ignore-engines \ 39 | && yarn test 40 | 41 | workflows: 42 | run-node-tests: 43 | jobs: 44 | - test: 45 | matrix: 46 | parameters: 47 | test-dir: 48 | - "./" 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | coverage* 4 | .tern-port 5 | v8.log 6 | build 7 | .*.sw? 8 | webpack.pid 9 | -------------------------------------------------------------------------------- /.yo: -------------------------------------------------------------------------------- 1 | webpackEnabled=on 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | react-atomic-ui.js.org 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![CircleCI](https://circleci.com/gh/react-atomic/react-atomic-ui/tree/main.svg?style=svg)](https://circleci.com/gh/react-atomic/react-atomic-ui/tree/main) 2 | 3 | React Atomic UI 4 | ==== 5 | 6 | Documentation and some examples for react-atomic-ui 7 | 8 | * Link 9 | * https://react-atomic-ui.js.org 10 | 11 | 12 | ## Design Concept 13 | 14 | ## UI Framework: `Reshow` 15 | * https://github.com/react-atomic/reshow 16 | 17 | ## React Folder Structure 18 | ``` 19 | react-app/ 20 | ├─ node_modules/ 21 | ├─ assets/ 22 | ├─ src/ 23 | │ ├─ config/ 24 | │ ├─ lib/ 25 | │ ├─ stores/ 26 | | ├─ ui/ 27 | | │ ├─ molecules 28 | | │ ├─ organisms 29 | | │ ├─ templates 30 | | │ ├─ pages 31 | ├─ .gitignore 32 | ├─ webpack.config.js 33 | ├─ babel.config.js 34 | ├─ compile.sh 35 | ├─ package.json 36 | ├─ README.md 37 | ├─ index.html 38 | ├─ index.tpl 39 | ``` 40 | -------------------------------------------------------------------------------- /assets/1.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[1],{145(c,b,a){a.d(b,{Z:()=>g});var d=a(470),e=a(467),f=Array.isArray;let g=function a(){var b=this;(0,d.Z)(this,a),(0,e.Z)(this,"max",null),(0,e.Z)(this,"min",null),(0,e.Z)(this,"process",function(a){return function(c){if(!f(c)||!c.length)return b;"function"!=typeof a&&(a=function(a){return a});var d=c.concat([]);if(!b.max&&!b.min){var e=a(d.shift());b.max=e,b.min=e}return d.forEach(function(c){!isNaN(c=a(c))&&(c>b.max?b.max=c:cN});var f,b={};a.r(b),a.d(b,{arc:()=>B,colors:()=>D,curve:()=>y,d3DnD:()=>G,d3Select:()=>K,d3Zoom:()=>H,getPointsCenter:()=>w,getZoom:()=>I,hArea:()=>z,handleGetD3:()=>s,line:()=>x,pie:()=>A,scaleBand:()=>E,scaleLinear:()=>F,stack:()=>C,toZoomTransform:()=>J});var g=a(468),h=a(46),i=a(1),j=a(59),k=a(8),l=a(6),m=a(12),n=a(7),o=a(2),c=a(469),p=a(5),q=a(145),r={curveCatmullRom:null,curveBasis:null,curveMonotoneX:null,line:null,pie:null,arc:null,area:null,stack:null,scaleLinear:null,scaleBand:null,scaleOrdinal:null,stackOrderNone:null,stackOffsetNone:null,drag:null,select:null,zoom:null,zoomTransform:null,zoomIdentity:null,schemeAccent:null,schemeBlues:null,schemeBrBG:null,schemeBuGn:null,schemeBuPu:null,schemeCategory10:null,schemeDark2:null,schemeGnBu:null,schemeGreens:null,schemeGreys:null,schemeOrRd:null,schemeOranges:null,schemePRGn:null,schemePaired:null,schemePastel1:null,schemePastel2:null,schemePiYG:null,schemePuBu:null,schemePuBuGn:null,schemePuOr:null,schemePuRd:null,schemePurples:null,schemeRdBu:null,schemeRdGy:null,schemeRdPu:null,schemeRdYlBu:null,schemeRdYlGn:null,schemeReds:null,schemeSet1:null,schemeSet2:null,schemeSet3:null,schemeSpectral:null,schemeTableau10:null,schemeYlGn:null,schemeYlGnBu:null,schemeYlOrBr:null,schemeYlOrRd:null},s=function(d){for(var a=(0,l.tW)(r),b=a.length;b--;){var c=a[b];r[c]=d[c]}},t=function(a,b){return a&&a.type?a.type:b||r.curveCatmullRom.alpha(.5)},u=function(a){return(a||{}).x},v=function(a){return(a||{}).y},w=function(e,a,b){a=a||u,b=b||v;var c=new q.Z().process(a)(e),d=new q.Z().process(b)(e);return{x:(c.max-c.min)/2+c.min,y:(d.max-d.min)/2+d.min}},x=(0,c.Z)(function(e,h,f,a,b){a=a||u,b=b||v;var c,d=[e,h],g=r.line().x(a).y(b);return f?(g=g.curve(t(f,r.curveBasis)),c=f.center||{x:w(d,a,b).x,y:e.y},d=[e,c,h]):c=w(d,a,b),{center:c,d:g(d)}}),y=function(c,a,b,d,e){return a=a||u,b=b||v,r.line().curve(t()).x(function(c){var b=d.scaler(a(c));return d.length&&(b+=d.length),b}).y(function(c){var a=e.scaler(b(c));return e.length&&(a+=e.length),a})(c)},z=(0,c.Z)(function(f,a,b,c,e){a=a||u,b||(b=function(a){return a.y0}),c||(c=function(a){return a.y1});var d=r.area().x(a).y0(b).y1(c);return e&&(d=d.curve(t(e,r.curveMonotoneX))),d(f)}),A=function(b,c,d,a){a||(a=function(a){return a.value});var e=r.pie().value(a)(b);return B(e,c,d)},B=function(c,a,b,f){var g=r.arc();a||(a=0),b||(b=a?2*a:50);var h=D(),d={outerRadius:b,innerRadius:a},e=c.map(function(a){var b=(0,o.Z)((0,o.Z)({},a),d);return f&&(g=g.cornerRadius(f)),a.path=g(b),a.centroid=g.centroid(b),a.color=h(a.index),a});return(0,o.Z)({items:e},d)},C=function(b,a){return a||(a=(0,l.tW)(b[0])),r.stack().keys(a).order(r.stackOrderNone).offset(r.stackOffsetNone)(b)},D=function(a){var b="schemeCategory10";return a||(a=b),r.scaleOrdinal((0,p.ZP)(r,[a],b))},E=function(j,k,m,f){var d=arguments.length>4&& void 0!==arguments[4]?arguments[4]:10;f||(f=function(a){return a.label});var e={},b=r.scaleBand().range([k,m]).paddingInner(.05).align(.1).domain(j.map(function(b){var a=f(b);return e[a]=null,a})),g=b.bandwidth(),q=Math.round(g/2),n=(0,l.tW)(e),a=n;if(d&&a.length>d){for(var o,h=[],i=Math.round(a.length/d),c=0,p=a.length;cw,Yz:()=>T,lk:()=>N,kJ:()=>y,ZA:()=>r,x1:()=>B,UL:()=>C,ny:()=>x,xv:()=>H,LG:()=>X,Sp:()=>Z});var n=a(2),b=a(1),o=a(51);a(5);var p=a(3),q=a(0),c=function(a){return(0,q.jsx)(p.iX,(0,n.Z)({},a))};c.defaultProps={atom:"g",ui:!1};let r=c;(function(a){return(0,q.jsx)(p.iX,(0,n.Z)({},a))}).defaultProps={ui:!1,atom:"path"};var s=a(470),t=a(471),u=a(9),v=a(10),i=function(b){(0,u.Z)(a,b);var c=(0,v.Z)(a);function a(){return(0,s.Z)(this,a),c.apply(this,arguments)}return(0,t.Z)(a,[{key:"render",value:function(){var a=this.props;return(0,q.jsx)(p.iX,(0,n.Z)({atom:"circle",ui:!1},a))}}]),a}(b.PureComponent);let w=i;var d=function(a){return(0,q.jsx)(p.iX,(0,n.Z)({},a))};d.defaultProps={ui:!1,atom:"svg",width:"100%"};let x=d,y=function(a){return(0,q.jsx)(x,(0,n.Z)({},a))};var z=a(468),A=["start","end","svgLine","curve","onD3Load"],e=(0,b.forwardRef)(function(e,g){var h=(0,b.useRef)(),t={getCenter:function(){return h.current}};(0,b.useImperativeHandle)(g,function(){return t},[]);var{start:c,end:d,svgLine:f,curve:i,onD3Load:j}=e,k=(0,z.Z)(e,A),[l,m]=(0,o.J)(j),a={};if(c&&d){if(f)a.x1=c.x,a.y1=c.y,a.x2=d.x,a.y2=d.y;else{if(!l)return null;var{center:r,d:s}=m.line(c,d,i);a.d=s,h.current=r}}return a.atom=f?"line":"path",(0,q.jsx)(p.iX,(0,n.Z)((0,n.Z)({ui:!1},k),a))});e.displayName="Line";let B=e;b.PureComponent;var j=function(b){(0,u.Z)(a,b);var c=(0,v.Z)(a);function a(){return(0,s.Z)(this,a),c.apply(this,arguments)}return(0,t.Z)(a,[{key:"render",value:function(){var a=this.props;return(0,q.jsx)(p.iX,(0,n.Z)({atom:"rect",ui:!1},a))}}]),a}(b.PureComponent);let C=j;var D=a(480),E=a(467),F=a(6),G=["parentWidth","alignCenter","x","y"],k=function(b){(0,u.Z)(a,b);var c=(0,v.Z)(a);function a(){var d;(0,s.Z)(this,a);for(var e=arguments.length,f=new Array(e),b=0;be});var d=a(6);function e(a,e){var b,f,c;return function(a){if(Array.isArray(a))return a}(a)||(b=a,f=e,c=[],(0,d.tW)(b).some(function(a,d){if(c.push(b[a]),f===d+1)return!0}),c)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}},31(c,b,a){a.d(b,{Z:()=>i});var d,e=a(1),f=a(22),g=a(23),h=a(11);let i=function(a){var b=a.pageName,c=a.tplProps;(0,e.useEffect)(function(){return setTimeout(function(){(0,g.Ns)({params:{activeMenu:b}}),(0,f.WI)({tplProps:c,pageName:b})}),d||(d=1,(0,h.Bt)("ajaxGet",{url:"/data/env",ini:!0,disableCacheBusting:!0})),function(){(0,g.Ns)({params:{activeMenu:null}})}},[])}}}]) -------------------------------------------------------------------------------- /assets/12.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[12],{14(c,b,a){a.d(b,{UB:()=>H,JG:()=>K,ZP:()=>w});var d,e,f,g,h,i,j=a(1),k=a(3),l=a(17),m=a(19),n=a(20),o=a(18),p=a(5);let q=function(){var[b,c]=(0,j.useState)(function(){return d||function(){}});return d||a.e(23).then(a.bind(a,44)).then(function(a){d=(0,p.MV)(a),c(function(){return d})}),b};var r=a(0);let s=function(a){var b=q(),c="```js\n"+a.children+"\n```";return(0,r.jsx)(k.ER,{children:b(c)})};var t=a(11),u=a(12);let v=function(b){var{url:d}=b,e=(0,u.s4)(),[a,f]=(0,j.useState)(),c=q();return((0,j.useEffect)(function(){(0,t.Bt)("ajaxGet",{url:d,callback:function(c,a,b){if(!1===e())return!1;200===b.status&&f(a.replace(/(\<\!\-\-hidden\-\-\>)([\s\S]*?)(\<\!\-\-\/hidden\-\-\>)/g,""))}})},[]),a)?(0,r.jsx)(k.XX,{children:(0,r.jsx)(k.ER,{children:c(a)})}):null},w=function(z){i=(0,k.UM)(y,i);var b,c,d,p,q,{header:A,children:B,code:C,git:a,npm:t,edit:u,id:D}=z,[E,I]=(0,j.useState)({on:!1}),w={};if(E.on?b=(0,r.jsx)(s,{children:C}):w=x.hidden,a){var F="https://raw.githubusercontent.com/"+a.replace(/(\/(blob|tree)\/(master|main)\/)/,"/$3/")+"README.md",G="https://github.com/"+a;c=(0,r.jsx)(v,{url:F}),d=(0,r.jsx)(k.JO,{atom:"a",target:"_blank",href:G,style:x.icon,children:e||(e=(0,r.jsx)(m.Z,{}))})}if(t){var H="https://www.npmjs.com/package/"+t;p=(0,r.jsx)(k.JO,{atom:"a",target:"_blank",href:H,style:x.icon,children:f||(f=(0,r.jsx)(n.Z,{}))})}return u&&(q=(0,r.jsx)(k.JO,{atom:"a",target:"_blank",href:u,style:x.icon,children:g||(g=(0,r.jsx)(o.Z,{}))})),(0,r.jsxs)(k.aV,{type:"segments",id:D,children:[(0,r.jsxs)(k.XX,{className:"tertiary",children:[(0,r.jsx)(k.h4,{style:x.header,className:"grey",children:A}),(0,r.jsxs)(k.iX,{style:x.iconBlock,children:[q,p,d,(0,r.jsx)(k.JO,{onClick:function(){return I(function(a){var{on:b}=a;return{on:!b}})},style:x.icon,children:h||(h=(0,r.jsx)(l.Z,{}))})]})]}),(0,r.jsx)(k.XX,{className:"secondary",style:w,styles:i.code,children:b}),(0,r.jsx)(k.XX,{children:B}),c]})};var x={header:{margin:0},hidden:{maxHeight:0,padding:"0 16px",margin:0,ovarflow:"hidden"},iconBlock:{position:"absolute",top:16,right:6},icon:{maxWidth:24,cursor:"pointer",marginRight:10}},y={code:[{transition:["padding 500ms ease"]}],fitWidth:[{whiteSpace:"break-spaces"},"code"]},z=a(2),A=a(468),B=a(16),C=a(7),D=a(8),E=["button","anchorLocator","updateUrl","resetUrl","children","id","onClose","path"],F=function(){var a=document.URL.split("#"),b=a.length-1,c="#"+a[b];return{lastAnchor:c}},G=function(c){var a=(0,D.JU)().URL,b=a.lastIndexOf("#"+c);-1!==b&&history.pushState("","",a.substring(0,b))};let H=function(b){var{button:f="Open full screen",anchorLocator:c=F,updateUrl:p=function(a){return history.pushState("","",(0,D.JU)().URL+"#"+a)},resetUrl:g=G,children:h,id:a,onClose:i,path:d}=b,l=(0,A.Z)(b,E),[m,q]=(0,j.useState)(),s=(0,j.useRef)();(0,j.useEffect)(function(){var{lastAnchor:b}=(0,C.ZP)(c,[d])||{};"#"+a===b?q(!0):q(function(a){return a&&(s.current="path"),!1})},[c,a,d]);var n=(0,j.useCallback)(function(){var{lastAnchor:b}=(0,C.ZP)(c,[d])||{};a&&a!==b&&p(a),q(!0)},[c,a,d]),o=(0,j.useCallback)(function(){"path"!==s.current&&(0,C.ZP)(g,[a]),(0,C.ZP)(i),q(!1),s.current=null},[g,a,i]),e=null;return m&&(e=(0,r.jsx)(B.IT,(0,z.Z)((0,z.Z)({},l),{},{onClose:o,children:h}))),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(k.zx,{onClick:n,children:f}),e]})};var I=a(36),J=["id"];let K=function(a){var{id:b="fullscreen"}=a,c=(0,A.Z)(a,J);return(0,r.jsx)(I.yR,{initStates:{":hash":"path"},children:function(a){return(0,r.jsx)(H,(0,z.Z)((0,z.Z)({},(0,z.Z)((0,z.Z)({},c),a)),{},{id:b,anchorLocator:I.ul,updateUrl:function(a){return(0,I.gH)("url",{url:(0,D.JU)().URL+"#"+a})},resetUrl:function(a){return(0,I.gH)("resetAnchor",a)}}))}})}},46(c,b,a){a.d(b,{Z:()=>e});var d=a(6);function e(a,e){var b,f,c;return function(a){if(Array.isArray(a))return a}(a)||(b=a,f=e,c=[],(0,d.tW)(b).some(function(a,d){if(c.push(b[a]),f===d+1)return!0}),c)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}},17(c,b,a){a.d(b,{Z:()=>e});var d=a(4);let e=function(a){return(0,d.Z)("Code","M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z")(a)}},18(c,b,a){a.d(b,{Z:()=>e});var d=a(4);let e=function(a){return(0,d.Z)("Edit","M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z")(a)}},19(c,b,a){a.d(b,{Z:()=>g});var d=a(468),e=a(4),f=["viewBox"];let g=function(a){var{viewBox:c="0 0 16 16"}=a,b=(0,d.Z)(a,f);return b.viewBox=c,(0,e.Z)("Git","M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z")(b)}},20(c,b,a){a.d(b,{Z:()=>g});var d=a(468),e=a(4),f=["viewBox","fill"];let g=function(b){var{viewBox:c="0 0 3200 3200",fill:g="#b93131"}=b,a=(0,d.Z)(b,f);return a.viewBox=c,a.fill=g,(0,e.Z)("Npm","M269 3186 c-99 -27 -193 -106 -243 -205 l-26 -50 0 -1332 0 -1331 31 -59 c40 -75 102 -132 187 -172 l67 -32 1255 -3 c911 -2 1271 0 1315 8 119 23 224 102 282 211 l28 54 0 1325 0 1325 -29 54 c-42 80 -128 163 -201 192 l-60 24 -1280 2 c-992 1 -1290 -1 -1326 -11z m1311 -1386 l0 -600 200 0 200 0 0 600 0 600 200 0 200 0 0 -800 0 -800 -800 0 -800 0 0 800 0 800 400 0 400 0 0 -600z")(a)}},4(c,b,a){a.d(b,{Z:()=>j});var d=a(2),e=a(468),f=a(26),g=a(24),h=a(0),i=["type","children"];let j=function(b,c){var a=function(j){var{type:k=null,children:l}=j,m=(0,e.Z)(j,i),a=c[k]||c["_"]||c;return(0,h.jsxs)(f.Z,(0,d.Z)((0,d.Z)({},m),{},{"data-name":b,children:[a.map?a.map(function(a){return(0,h.jsx)(g.Z,{d:a})}):(0,h.jsx)(g.Z,{d:a}),l]}))};return a.displayName=b,a}},406(e,b,a){a.r(b),a.d(b,{default:()=>w});var f,g=a(2),h=a(14),i=a(31),j=a(46),d=a(1),k=a(5),l=a(48),m=a(3),n=a(7),o=a(93),p=a(39),q=a(12),r="[VERSION]",s=function(a){var c=a.onLoadDelay,C=void 0===c?1500:c,e=a.inlineCSS,m=void 0===e?"body {padding: 0; margin: 0; background: transparent !important;}":e,f=a.js,s=void 0===f?"https://cdn.jsdelivr.net/npm/@asciidoctor/core@[VERSION]/dist/browser/asciidoctor.min.js":f,h=a.css,t=void 0===h?"https://cdn.jsdelivr.net/npm/@asciidoctor/core@[VERSION]/dist/css/asciidoctor.min.css":h,i=a.npmVersion,l=void 0===i?"2.2.6":i,D=a.onLoad,b=a.options,u=a.attributes,v=a.children,w=(0,d.useRef)(),x=(0,q.J7)(),y=(0,j.Z)(x,1),E=y[0];(0,d.useEffect)(function(){var b,a=w.current.getWindow(),c=function(a){w.current.postHeight(),(0,n.ZP)(D,[a])};return a.onRender=function(h){var e=(0,o.Z)({doc:a.document}),d=(0,j.Z)(e,2),f=d[0],g=d[1];b=g;var i=function(){E(function(){return c(h)},C)};f(function(){var a=p.ZP.from(h).all("img"),b=null==a?void 0:a.length;if(b){var c=0;a.forEach(function(d){var a=new Image;a.onload=function(){++c>=b&&i()},a.onerror=function(){++c>=b&&i()},a.src=d.src})}i(),w.current.postHeight()})},function(){(0,n.ZP)(b)}},[]),(b=b||{}).attributes=(0,g.Z)((0,g.Z)({},(0,k.ZP)(b,["attributes"],{})),u);var z=s.replace(r,l),A=t.replace(r,l),B=(0,d.useMemo)(function(){return[''),''),'",'
',"\n \n ")].join("")},[A,z,v,b]);return{expose:{getBody:function(){return w.current.getBody()}},inlineCSS:m,lastIframe:w,html:B}},c=(0,d.forwardRef)(function(b,c){var a=s(b),h=a.expose,e=a.inlineCSS,f=a.lastIframe,g=a.html;return(0,d.useImperativeHandle)(c,function(){return h},[]),d.createElement(l.Z,{ref:f,inlineCSS:e,autoHeight:!0},d.createElement(m.ER,null,g))});c.displayName="Asciidoc";let t=c;var u=a(0);let v=function(a){return(0,u.jsx)(t,{options:{doctype:"book"},children:"\n:toc:\n:toc-placement!:\ntoc::[]\n\n= h1 - test\ntest\n\n== h2 - test2\n* Hello *world*\n\n== h2 - test3\n- [ ] option1\n- [*] option1\n"})},w=function(a){return(0,i.Z)((0,g.Z)((0,g.Z)({},a),{},{pageName:"AsciiDoc"})),(0,u.jsx)(u.Fragment,{children:f||(f=(0,u.jsx)(h.ZP,{code:'import Asciidoc from "organism-react-asciidoc";\n\nconst adoc = `\n:toc:\n:toc-placement!:\ntoc::[]\n\n= h1 - test\ntest\n\n== h2 - test2\n* Hello *world*\n\n== h2 - test3\n- [ ] option1\n- [*] option1\n`;\n\nconst AsciidocDemo = (props) => (\n {adoc}\n);\n\nexport default AsciidocDemo;\n',header:"Ascii Doc",edit:"https://codesandbox.io/s/8vj7x3m82",git:"react-atomic/react-atomic-organism/tree/main/packages/organism-react-asciidoc/",children:(0,u.jsx)(v,{})}))})}},31(c,b,a){a.d(b,{Z:()=>i});var d,e=a(1),f=a(22),g=a(23),h=a(11);let i=function(a){var b=a.pageName,c=a.tplProps;(0,e.useEffect)(function(){return setTimeout(function(){(0,g.Ns)({params:{activeMenu:b}}),(0,f.WI)({tplProps:c,pageName:b})}),d||(d=1,(0,h.Bt)("ajaxGet",{url:"/data/env",ini:!0,disableCacheBusting:!0})),function(){(0,g.Ns)({params:{activeMenu:null}})}},[])}}}]) -------------------------------------------------------------------------------- /assets/20.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[20],{391(c,b,a){a.r(b),a.d(b,{default:()=>g});var d=a(2),e=a(31),f=a(0);let g=function(a){return(0,e.Z)((0,d.Z)((0,d.Z)({},a),{},{pageName:"Atoms"})),console.log("Develop Mode:","production"),(0,f.jsx)(f.Fragment,{children:"This is atom"})}},31(c,b,a){a.d(b,{Z:()=>i});var d,e=a(1),f=a(22),g=a(23),h=a(11);let i=function(a){var b=a.pageName,c=a.tplProps;(0,e.useEffect)(function(){return setTimeout(function(){(0,g.Ns)({params:{activeMenu:b}}),(0,f.WI)({tplProps:c,pageName:b})}),d||(d=1,(0,h.Bt)("ajaxGet",{url:"/data/env",ini:!0,disableCacheBusting:!0})),function(){(0,g.Ns)({params:{activeMenu:null}})}},[])}}}]) -------------------------------------------------------------------------------- /assets/21.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[21],{392(c,b,a){a.r(b),a.d(b,{default:()=>p});var d,e,f,g,h,i,j,k=a(2),l=a(31),m=a(3),n=a(30),o=a(0);let p=function(a){return(0,l.Z)((0,k.Z)((0,k.Z)({},a),{},{pageName:"Molecules"})),(0,o.jsxs)(o.Fragment,{children:[d||(d=(0,o.jsx)(m.FW,{children:"Input box"})),e||(e=(0,o.jsx)("div",{children:"Inputbox"})),f||(f=(0,o.jsx)(m.l0,{children:(0,o.jsx)(m.gN,{atom:"input"})})),g||(g=(0,o.jsx)("div",{children:"Inputbox with button"})),h||(h=(0,o.jsx)(m.Wz,{button:"Go!"})),i||(i=(0,o.jsx)("div",{children:"Search Box"})),j||(j=(0,o.jsx)(n.Rj,{}))]})}},31(c,b,a){a.d(b,{Z:()=>i});var d,e=a(1),f=a(22),g=a(23),h=a(11);let i=function(a){var b=a.pageName,c=a.tplProps;(0,e.useEffect)(function(){return setTimeout(function(){(0,g.Ns)({params:{activeMenu:b}}),(0,f.WI)({tplProps:c,pageName:b})}),d||(d=1,(0,h.Bt)("ajaxGet",{url:"/data/env",ini:!0,disableCacheBusting:!0})),function(){(0,g.Ns)({params:{activeMenu:null}})}},[])}}}]) -------------------------------------------------------------------------------- /assets/26.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[26],{98(d,a,b){b.r(a),b.d(a,{aniName:()=>c,default:()=>e});var c="breath";let e={[c]:[[{transform:["scale(1)"]},{opacity:.7,transform:["scale(.75)"]},{opacity:.9,transform:["scale(1)"]}],["@keyframes "+c,"0%","45%","100%"]]}}}]) -------------------------------------------------------------------------------- /assets/27.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[27],{99(d,a,b){b.r(a),b.d(a,{aniName:()=>c,default:()=>e});var c="pulsate";let e={[c]:[[{transform:["scale(0.1, 0.1)"],opacity:0,filter:"alpha(opacity=0)",msFilter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"},{opacity:1,filter:"none",msFilter:"none"},{transform:["scale(1.2, 1.2)"],filter:"alpha(opacity=0)",msFilter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}],["@keyframes "+c,"0%","50%","100%"]]}}}]) -------------------------------------------------------------------------------- /assets/28.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[28],{100(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={spin:[[{transform:["rotateZ(0deg)"]},{transform:["rotateZ(360deg)"]}],["@keyframes spin","0%","100%"]]}}}]) -------------------------------------------------------------------------------- /assets/3.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[3],{224(a){a.exports='import React, { useState } from "react";\nimport { SemanticUI, Form, Field, Menu, Item } from "react-atomic-molecule";\n\nimport { Dropdown, SelectField } from "organism-react-navigation";\nimport { Checkbox } from "react-atomic-organism";\n\nconst options = [\n {\n label: "Boy",\n value: "boy",\n },\n {\n label: "Girl",\n value: "girl",\n },\n];\n\nconst DropdownExample = (props) => {\n const [value, setValue] = useState();\n\n const MyList = (props) => (\n \n setValue("Boy")}>Boy\n setValue("Girl")}>Girl\n \n );\n\n return (\n }>\n You-select {value}\n \n }\n />\n );\n};\n\nconst ErrorFormExample = () => {\n const [isError, setIsError] = useState(false);\n\n const handleChange = (e) => {\n setIsError(e.checked ? true : false);\n };\n\n return (\n \n
\n \n \n \n \n \n \n
\n );\n};\n\nexport default ErrorFormExample;\n\nconst Styles = {\n dropdown: {\n marginLeft: 10,\n },\n};\n'},14(c,b,a){a.d(b,{UB:()=>H,JG:()=>K,ZP:()=>w});var d,e,f,g,h,i,j=a(1),k=a(3),l=a(17),m=a(19),n=a(20),o=a(18),p=a(5);let q=function(){var[b,c]=(0,j.useState)(function(){return d||function(){}});return d||a.e(23).then(a.bind(a,44)).then(function(a){d=(0,p.MV)(a),c(function(){return d})}),b};var r=a(0);let s=function(a){var b=q(),c="```js\n"+a.children+"\n```";return(0,r.jsx)(k.ER,{children:b(c)})};var t=a(11),u=a(12);let v=function(b){var{url:d}=b,e=(0,u.s4)(),[a,f]=(0,j.useState)(),c=q();return((0,j.useEffect)(function(){(0,t.Bt)("ajaxGet",{url:d,callback:function(c,a,b){if(!1===e())return!1;200===b.status&&f(a.replace(/(\<\!\-\-hidden\-\-\>)([\s\S]*?)(\<\!\-\-\/hidden\-\-\>)/g,""))}})},[]),a)?(0,r.jsx)(k.XX,{children:(0,r.jsx)(k.ER,{children:c(a)})}):null},w=function(z){i=(0,k.UM)(y,i);var b,c,d,p,q,{header:A,children:B,code:C,git:a,npm:t,edit:u,id:D}=z,[E,I]=(0,j.useState)({on:!1}),w={};if(E.on?b=(0,r.jsx)(s,{children:C}):w=x.hidden,a){var F="https://raw.githubusercontent.com/"+a.replace(/(\/(blob|tree)\/(master|main)\/)/,"/$3/")+"README.md",G="https://github.com/"+a;c=(0,r.jsx)(v,{url:F}),d=(0,r.jsx)(k.JO,{atom:"a",target:"_blank",href:G,style:x.icon,children:e||(e=(0,r.jsx)(m.Z,{}))})}if(t){var H="https://www.npmjs.com/package/"+t;p=(0,r.jsx)(k.JO,{atom:"a",target:"_blank",href:H,style:x.icon,children:f||(f=(0,r.jsx)(n.Z,{}))})}return u&&(q=(0,r.jsx)(k.JO,{atom:"a",target:"_blank",href:u,style:x.icon,children:g||(g=(0,r.jsx)(o.Z,{}))})),(0,r.jsxs)(k.aV,{type:"segments",id:D,children:[(0,r.jsxs)(k.XX,{className:"tertiary",children:[(0,r.jsx)(k.h4,{style:x.header,className:"grey",children:A}),(0,r.jsxs)(k.iX,{style:x.iconBlock,children:[q,p,d,(0,r.jsx)(k.JO,{onClick:function(){return I(function(a){var{on:b}=a;return{on:!b}})},style:x.icon,children:h||(h=(0,r.jsx)(l.Z,{}))})]})]}),(0,r.jsx)(k.XX,{className:"secondary",style:w,styles:i.code,children:b}),(0,r.jsx)(k.XX,{children:B}),c]})};var x={header:{margin:0},hidden:{maxHeight:0,padding:"0 16px",margin:0,ovarflow:"hidden"},iconBlock:{position:"absolute",top:16,right:6},icon:{maxWidth:24,cursor:"pointer",marginRight:10}},y={code:[{transition:["padding 500ms ease"]}],fitWidth:[{whiteSpace:"break-spaces"},"code"]},z=a(2),A=a(468),B=a(16),C=a(7),D=a(8),E=["button","anchorLocator","updateUrl","resetUrl","children","id","onClose","path"],F=function(){var a=document.URL.split("#"),b=a.length-1,c="#"+a[b];return{lastAnchor:c}},G=function(c){var a=(0,D.JU)().URL,b=a.lastIndexOf("#"+c);-1!==b&&history.pushState("","",a.substring(0,b))};let H=function(b){var{button:f="Open full screen",anchorLocator:c=F,updateUrl:p=function(a){return history.pushState("","",(0,D.JU)().URL+"#"+a)},resetUrl:g=G,children:h,id:a,onClose:i,path:d}=b,l=(0,A.Z)(b,E),[m,q]=(0,j.useState)(),s=(0,j.useRef)();(0,j.useEffect)(function(){var{lastAnchor:b}=(0,C.ZP)(c,[d])||{};"#"+a===b?q(!0):q(function(a){return a&&(s.current="path"),!1})},[c,a,d]);var n=(0,j.useCallback)(function(){var{lastAnchor:b}=(0,C.ZP)(c,[d])||{};a&&a!==b&&p(a),q(!0)},[c,a,d]),o=(0,j.useCallback)(function(){"path"!==s.current&&(0,C.ZP)(g,[a]),(0,C.ZP)(i),q(!1),s.current=null},[g,a,i]),e=null;return m&&(e=(0,r.jsx)(B.IT,(0,z.Z)((0,z.Z)({},l),{},{onClose:o,children:h}))),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(k.zx,{onClick:n,children:f}),e]})};var I=a(36),J=["id"];let K=function(a){var{id:b="fullscreen"}=a,c=(0,A.Z)(a,J);return(0,r.jsx)(I.yR,{initStates:{":hash":"path"},children:function(a){return(0,r.jsx)(H,(0,z.Z)((0,z.Z)({},(0,z.Z)((0,z.Z)({},c),a)),{},{id:b,anchorLocator:I.ul,updateUrl:function(a){return(0,I.gH)("url",{url:(0,D.JU)().URL+"#"+a})},resetUrl:function(a){return(0,I.gH)("resetAnchor",a)}}))}})}},17(c,b,a){a.d(b,{Z:()=>e});var d=a(4);let e=function(a){return(0,d.Z)("Code","M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z")(a)}},18(c,b,a){a.d(b,{Z:()=>e});var d=a(4);let e=function(a){return(0,d.Z)("Edit","M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z")(a)}},19(c,b,a){a.d(b,{Z:()=>g});var d=a(468),e=a(4),f=["viewBox"];let g=function(a){var{viewBox:c="0 0 16 16"}=a,b=(0,d.Z)(a,f);return b.viewBox=c,(0,e.Z)("Git","M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z")(b)}},20(c,b,a){a.d(b,{Z:()=>g});var d=a(468),e=a(4),f=["viewBox","fill"];let g=function(b){var{viewBox:c="0 0 3200 3200",fill:g="#b93131"}=b,a=(0,d.Z)(b,f);return a.viewBox=c,a.fill=g,(0,e.Z)("Npm","M269 3186 c-99 -27 -193 -106 -243 -205 l-26 -50 0 -1332 0 -1331 31 -59 c40 -75 102 -132 187 -172 l67 -32 1255 -3 c911 -2 1271 0 1315 8 119 23 224 102 282 211 l28 54 0 1325 0 1325 -29 54 c-42 80 -128 163 -201 192 l-60 24 -1280 2 c-992 1 -1290 -1 -1326 -11z m1311 -1386 l0 -600 200 0 200 0 0 600 0 600 200 0 200 0 0 -800 0 -800 -800 0 -800 0 0 800 0 800 400 0 400 0 0 -600z")(a)}},4(c,b,a){a.d(b,{Z:()=>j});var d=a(2),e=a(468),f=a(26),g=a(24),h=a(0),i=["type","children"];let j=function(b,c){var a=function(j){var{type:k=null,children:l}=j,m=(0,e.Z)(j,i),a=c[k]||c["_"]||c;return(0,h.jsxs)(f.Z,(0,d.Z)((0,d.Z)({},m),{},{"data-name":b,children:[a.map?a.map(function(a){return(0,h.jsx)(g.Z,{d:a})}):(0,h.jsx)(g.Z,{d:a}),l]}))};return a.displayName=b,a}},223(c,b,a){a.d(b,{Z:()=>o});var d=a(2),e=a(1),f=a(3),g=a(23),h=a(30),i=a(0);function j(c,a){(null==a||a>c.length)&&(a=c.length);for(var b=0,d=new Array(a);bi});var d,e=a(1),f=a(22),g=a(23),h=a(11);let i=function(a){var b=a.pageName,c=a.tplProps;(0,e.useEffect)(function(){return setTimeout(function(){(0,g.Ns)({params:{activeMenu:b}}),(0,f.WI)({tplProps:c,pageName:b})}),d||(d=1,(0,h.Bt)("ajaxGet",{url:"/data/env",ini:!0,disableCacheBusting:!0})),function(){(0,g.Ns)({params:{activeMenu:null}})}},[])}}}]) -------------------------------------------------------------------------------- /assets/33.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[33],{372(c,a,b){function d(){return new Worker(b.p+"worker.fe6f7bb.bundle.worker.js")}b.r(a),b.d(a,{default:()=>d})}}]) -------------------------------------------------------------------------------- /assets/34.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[34],{377(d,b,c){function a(b){if(!(this instanceof a))return new a(b);b=b||{},this.setName(b.name),this.setLevel(b.level),this.setSize(b.size)}c.r(b),c.d(b,{default:()=>e}),a.prototype.setName=function(a){return this.name=a||"DLOG",this.name},a.prototype.setLevel=function(a){return this.level=a&&this.level_map[a]?a:"info",this.level_no=this.level_map[this.level],this.level},a.prototype.setSize=function(a){return this.size=a||14,this.size},a.prototype.level_map={trace:1,debug:2,info:3,warn:4,error:5,silent:6},a.prototype.color_map={name:"cyan",trace:"black",debug:"green",info:"blue",warn:"orange",error:"red"},a.prototype.getCSS=function(a){return this.color_map[a]||(a="info"),a?"font-size: "+this.size+"px;color: "+this.color_map[a]:"font-size: "+this.size+"px"},a.prototype.log=function(a,b){"silent"!==a&&this.level_map[a]>=this.level_no&&this.show(a,b)},a.prototype.show=function(a,b){var c=function(a){return Object.keys(a=a||{})};console.info("%c [%s] %c %s %c %s:",this.getCSS(),new Date().toJSON(),this.getCSS("name"),this.name,this.getCSS(a),a.toUpperCase()),console[a]||(a="info"),"trace"===a?a="debug":"debug"===a&&(a="log"),b[0]=function(a){if("string"!=typeof a)return a;try{return JSON.parse(a,function(d,a){if(a&&"object"==typeof a){var b=Object.create(null);return c(a).forEach(function(c){b[c]=a[c]}),b}return a})}catch(b){return a}}(b[0]),function(b){for(var e=c(b),d=0,f=e.length;dd});let d={candleInTheWindCss:[{opacity:0,animationFillMode:"forwards"},".candleInTheWind"],candleInTheWindKeyframes:[[{opacity:0},{opacity:.25,transform:["skewX(-10deg)"]},{opacity:0},{opacity:0,transform:["skewX(-10deg)"]},{opacity:.75},{opacity:0},{opacity:1,transform:["skewX(-5deg)"]},{opacity:.5},{opacity:1}],["@keyframes candleInTheWind","0%","12.5%","25%","37.5%","50%","62.5%","75%","87.5%","100%"]]}}}]) -------------------------------------------------------------------------------- /assets/36.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[36],{379(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeIn:[[{opacity:0},{opacity:1}],["@keyframes fadeIn","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/37.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[37],{380(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeInDown:[[{opacity:0,transform:["translate3d(0, -100%, 0)"]},{opacity:1,transform:["none"]}],["@keyframes fadeInDown","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/38.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[38],{381(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeInLeft:[[{opacity:0,transform:["translate3d(-100%, 0, 0)"]},{opacity:1,transform:["none"]}],["@keyframes fadeInLeft","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/39.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[39],{382(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeInRight:[[{opacity:0,transform:["translate3d(100%, 0, 0)"]},{opacity:1,transform:["none"]}],["@keyframes fadeInRight","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/40.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[40],{383(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeInUp:[[{opacity:0,transform:["translate3d(0, 100%, 0)"]},{opacity:1,transform:["none"]}],["@keyframes fadeInUp","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/41.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[41],{384(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeInUpBig:[[{opacity:.5,transform:["translate3d(0, 2000px, 0)"]},{opacity:1,transform:["none"]}],["@keyframes fadeInUpBig","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/42.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[42],{385(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeOut:[[{opacity:1},{opacity:0}],["@keyframes fadeOut","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/43.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[43],{386(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeOutDown:[[{opacity:1},{opacity:0,transform:["translate3d(0, 100%, 0)"]}],["@keyframes fadeOutDown","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/44.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[44],{387(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeOutLeft:[[{opacity:1},{opacity:0,transform:["translate3d(-100%, 0, 0)"]}],["@keyframes fadeOutLeft","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/45.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[45],{388(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeOutRight:[[{opacity:1},{opacity:0,transform:["translate3d(100%, 0, 0)"]}],["@keyframes fadeOutRight","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/46.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[46],{389(c,a,b){b.r(a),b.d(a,{default:()=>d});let d={fadeOutUp:[[{opacity:1},{opacity:0,transform:["translate3d(0, -100%, 0)"]}],["@keyframes fadeOutUp","from","to"]]}}}]) -------------------------------------------------------------------------------- /assets/47.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[47],{390(d,a,b){b.r(a),b.d(a,{aniName:()=>c,default:()=>e});var c="flip";let e={[c]:[[{transform:"perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)",animationTimingFunction:"ease-out"},{transform:"perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)",animationTimingFunction:"ease-out"},{transform:"perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)",animationTimingFunction:"ease-in"}],["@keyframes "+c,"0%","50%","100%"]]}}}]) -------------------------------------------------------------------------------- /assets/48.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[48],{397(e,c,a){a.r(c),a.d(c,{default:()=>r});var f,g,h=a(2),i=a(14),j=a(31),k=a(1),l=a(146),m=a(3),n=a(30),o=a(0);function p(c,a){(null==a||a>c.length)&&(a=c.length);for(var b=0,d=new Array(a);b {\n const uml = useRef();\n const [isDisableCurve, setIsDisableCurve] = useState(false);\n const handleUml = (el) => (uml.current = el);\n const handleUpdate = (e) => {\n const t = e.currentTarget || {};\n const fm = t.form;\n uml.current.zoom.setXYK({\n x: fm.x.value || null,\n y: fm.y.value || null,\n k: fm.k.value || null,\n });\n };\n const handleZoom = (e) => {\n // console.log(e.zoom.getXYK());\n };\n let isDisableDel;\n let isDisableMove;\n return (\n <>\n d.conns}\n connFromBoxGroupLocator={(d) => d.from.table}\n connFromBoxLocator={(d) => d.from.col}\n connToBoxGroupLocator={(d) => d.to.table}\n connToBoxLocator={(d) => d.to.col}\n onBoxWillDrag={(e) => {\n return !isDisableMove.getChecked().input;\n }}\n onLineDel={(e) => {\n console.log({ e });\n return !isDisableDel.getChecked().input;\n }}\n />\n
\n \n \n \n \n \n \n {\n setIsDisableCurve(checked);\n }}\n />\n (isDisableDel = el)}\n />\n (isDisableMove = el)}\n />\n \n \n \n \n );\n};\n\nexport default D3UmlPerfExample;\n',header:"D3 Uml",id:"d3-uml",children:(0,o.jsx)(q,{})}))})}}}]) -------------------------------------------------------------------------------- /assets/49.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[49],{405(c,b,a){a.r(b),a.d(b,{default:()=>n});var d,e,f,g=a(2),h=a(14),i=a(31);a(1);var j=a(0);let k=function(a){return d||(d=(0,j.jsx)(h.ZP,{code:'import React from "react";\n\n/**\n * Production please use\n * import CodeExample from \'organism-react-code\'\n */\nimport CodeExample from "organism-react-code";\n\n/**\n * Your source code.\n * npm i raw-loader\n */\nimport code from "../../../../../src/ui/organisms/CodeExample.example.jsx?raw";\n\nconst CodeExampleExample = (props) => (\n \n
Test Demo Area
\n \n);\n\nexport default CodeExampleExample;\n',header:"Test Header",git:"react-atomic/react-atomic-organism/tree/main/packages/organism-react-code/",npm:"organism-react-code",children:(0,j.jsx)("div",{children:"Test Demo Area"})}))};var l=a(116);let m=function(a){return(0,j.jsx)("button",{onClick:function(){return(0,l.j)()},children:"open"})},n=function(a){return(0,i.Z)((0,g.Z)((0,g.Z)({},a),{},{pageName:"Code"})),(0,j.jsxs)(j.Fragment,{children:[e||(e=(0,j.jsx)(k,{})),f||(f=(0,j.jsx)(h.ZP,{code:'import React from "react";\n\nimport { openCodeEditor } from "organism-react-codeeditor";\n\nconst CodeEditorExample = (props) => {\n return ;\n};\n\nexport default CodeEditorExample;\n',header:"Codemirror Example",children:(0,j.jsx)(m,{})}))]})}}}]) -------------------------------------------------------------------------------- /assets/50.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[50],{413(d,b,a){a.r(b),a.d(b,{default:()=>S});var e,f,g,h,i=a(2),j=a(31),k=a(468),l=a(1),m=a(3),n=a(74),o=a(52),p=a(22),q=a(16),r=a(43),s=a(5),t=a(0);function u(c,a){(null==a||a>c.length)&&(a=c.length);for(var b=0,d=new Array(a);ba?"0"+a:a)},z=function(){return(0,t.jsx)(p.z1,{initStates:["pomodoro"],children:function(b){var a=b.pomodoro;return a?(0,t.jsx)(m.aV,{atom:"ol",children:a.tip.map(function(a,b){return(0,t.jsx)(m.ck,{children:a},b)})}):null}})},A=function(a){var b=a.col1;return a.col2,(0,k.Z)(a,v),(0,t.jsx)(m.XX,{children:(0,t.jsx)(m.X2,{children:(0,t.jsx)(m.sg,{className:"pure-u-md-1-2",children:b})})})},c=function(b){var c=b.countdown,d=b.useTomato;f=(0,m.UM)(D,f);var a=d(c),g=a.sec,h=a.active,i=a.preview,j=a.activeType,k=a.handler,p=a.modal,r=a.resetInput,s=a.TotalSec;return(0,t.jsxs)(m.iX,{children:[(0,l.useMemo)(function(){var d,a,b,e,f=(0,o.aQ)(g/s),p=(0,m.Jx)("big Pomodoro",(a={},b=null===(d=c[j])|| void 0===d?void 0:d.colorName,e=h||i,b in a?Object.defineProperty(a,b,{value:e,enumerable:!0,configurable:!0,writable:!0}):a[b]=e,a)),l={};return f>50&&(l.styles=(0,m._s)({transform:"translate("+(100-f)+"%, 0)"},!1,!1)),(0,t.jsx)(n.k,{onClick:k.clickProgress,className:p,style:C.progress,percent:f,barLabel:y(g),barLabelProps:l})},[g,h,i]),(0,t.jsx)(A,{col1:(0,t.jsx)(m.aV,{style:C.buttonList,children:x(c).map(function(a){var b=c[a],d=null;if(a===j)d=b.colorName;else if(h)return null;var e=k.start({getModal:function(a){return(0,t.jsxs)(q.pd,{basic:!0,ref:p,contentStyle:{textAlign:"center"},children:[(0,t.jsx)(m.zx,{className:"inverted",onClick:k.stop,children:"Pause"}),(0,t.jsx)(m.Wz,{refCb:r,style:C.resetInput,defaultValue:a,inputStyle:C.reset,className:"inverted transparent",leftLabel:"Resst to:",rightLabel:"min",button:"Reset",actionProps:{className:"inverted",onClick:k.reset}})]})}});return(0,t.jsx)(m.zx,{id:a,className:d,onClick:e,onMouseEnter:k.btnMouseIn,onMouseLeave:k.btnMouseOut,children:b.label},a)})})}),e||(e=(0,t.jsx)(z,{}))]})};c.defaultProps={countdown:{POMODORO:{minute:25,label:"Pomodoro",colorName:"red"},SHORT_BREAK:{minute:5,label:"Short Break",colorName:"teal"},LONG_BREAK:{minute:15,label:"Long Break",colorName:"blue"}},useTomato:function(t){var a,c,j=(0,l.useRef)(25),d=60*j.current,e=(a=(0,l.useState)({activeType:"POMODORO",sec:d}),c=2,function(a){if(Array.isArray(a))return a}(a)||function(b,e){var f,g,a=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=a){var c=[],d=!0,h=!1;try{for(a=a.call(b);!(d=(f=a.next()).done)&&(c.push(f.value),!e||c.length!==e);d=!0);}catch(i){h=!0,g=i}finally{try{d||null==a.return||a.return()}finally{if(h)throw g}}return c}}(a,c)||function d(a,c){if(a){if("string"==typeof a)return u(a,c);var b=Object.prototype.toString.call(a).slice(8,-1);if("Object"===b&&a.constructor&&(b=a.constructor.name),"Map"===b||"Set"===b)return Array.from(b);if("Arguments"===b||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(b))return u(a,c)}}(a,c)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),b=e[0],v=e[1],f=b.sec,m=b.preview,g=b.active,h=b.activeType,x=(0,l.useRef)(),n=(0,l.useRef)(),o=(0,l.useRef)(),y=(0,l.useRef)(),z=(0,l.useRef)();(0,l.useEffect)(function(){return function(){p.stop()}},[]),(0,l.useEffect)(function(){var a=(0,r.u3)();y.current={active:g,activeType:h,now:a,sec:f}},[g,h,f]);var A=function(a,c,d){if(a){var b;c=null!==(b=c)&& void 0!==b?b:60*a,v(function(a){return(0,i.Z)((0,i.Z)((0,i.Z)({},a),d),{},{sec:c})}),j.current=a}},B=function(b,c,d){var a,e=null===(a=z.current)|| void 0===a?void 0:a.activeType;b&&e===b&&z.current.sec?A(c,z.current.sec,d):A(c,null,d)},p={btnMouseIn:function(d){if(null===(f=y.current)|| void 0===f||!f.active){z.current||(z.current=(0,i.Z)({},y.current));var f,a,b,c=null==d?void 0:null===(a=d.currentTarget)|| void 0===a?void 0:a.id,e=null===(b=t[c])|| void 0===b?void 0:b.minute;B(c,e,{activeType:c,preview:!0})}},btnMouseOut:function(b){if(null===(c=y.current)|| void 0===c||!c.active){b.currentTarget,null==b||null===(d=b.currentTarget)|| void 0===d||d.id;var c,d,a=z.current.activeType;a?B(a,t[a].minute,{activeType:a,preview:!1}):v(function(b){return(0,i.Z)((0,i.Z)({},b),{},{activeType:a,preview:!1})})}},clickProgress:function(){if(y.current){if(y.current.active)p.stop();else{var a=y.current.activeType;a&&p.start({countdownKey:a})()}}},start:function(a){var b=void 0===a?{}:a,c=b.countdownKey,d=b.getModal;return function(b){var a,e=null===(a=t[c=(null==b?void 0:b.currentTarget.id)||c])|| void 0===a?void 0:a.minute;x.current?(console.warn("Timer already running"),d&&(0,q.hq)("dom/update",{popup:d(e)})):(y.current=null,B(c,e,{active:!0,activeType:c}),setTimeout(function(){z.current=(0,i.Z)({},y.current),x.current=setInterval(function(){v(function(b){var a=b.sec,e=(0,k.Z)(b,w),c=(0,s.ZP)(y.current,["now"]);if(c){var d=(0,r.u3)()-c;d>1e3&&(a-=Math.floor(d/1e3))}return(a<=0||isNaN(a))&&(p.stop(),a=0),(0,i.Z)((0,i.Z)({},e),{},{sec:a})})},100)},200))}},stop:function(){z.current=(0,i.Z)({},y.current),n.current&&n.current.close(),x.current&&(clearInterval(x.current),x.current=null),v(function(a){return(0,i.Z)((0,i.Z)({},a),{},{active:!1,preview:!1})})},reset:function(){y.current=null,p.stop(),A(o.current.value)}};return{sec:f,active:g,preview:m,activeType:h,TotalSec:d,handler:p,modal:n,resetInput:o}}};let B=c;var C={progress:{cursor:"pointer"},buttonList:{textAlign:"center"},resetInput:{marginLeft:20},reset:{width:20}},D={bar:[{overflow:"inherit"},".ui.progress.Pomodoro .bar"],barLabel:[{fontSize:"7rem"},".ui.progress.Pomodoro .bar>.progress"]},E=a(45),F=a(39),G=a(68),H=a(6);function I(c,a){(null==a||a>c.length)&&(a=c.length);for(var b=0,d=new Array(a);bK});var k,l,b=a(1),d=a(3),f=a(23),m=a(470),n=a(471),o=a(9),p=a(10),q=a(0),r=function(b){(0,o.Z)(a,b);var c=(0,p.Z)(a);function a(){return(0,m.Z)(this,a),c.apply(this,arguments)}return(0,n.Z)(a,[{key:"render",value:function(){return(0,q.jsx)(d.iX,{styles:s.container,children:this.props.children})}}]),a}(b.Component),s={container:(0,d._s)({float:"left",width:"340px",height:"52px",lineHeight:"52px",textAlign:"center"})};b.Component,b.Component,(0,d._s)({minHeight:"53px",borderTop:"2px solid #2baab1",overflow:"hidden"}),(0,f.Su)({sideWidth:160,active:!0});var t=a(2),u=a(468),v=a(22),w=["item"];(function(a){var{item:c}=a,b=(0,u.Z)(a,w),e=(0,d.Jx)(b.className,{item:c});return(0,q.jsx)(v.fr,(0,t.Z)((0,t.Z)({},b),{},{component:d.iX,className:e,atom:"a"}))}).defaultProps={item:!0};var x=a(480),e=a(467),y=a(11),z=a(5),A=["refCb","messageHeader","messageClassName"],g=function(b){(0,o.Z)(a,b);var c=(0,p.Z)(a);function a(){var b;(0,m.Z)(this,a);for(var f=arguments.length,g=new Array(f),d=0;dd})}}]) -------------------------------------------------------------------------------- /assets/53.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[53],{425(d,b,a){a.r(b),a.d(b,{default:()=>v});var e=a(2),f=a(15),g=a(1),h=a(3),i=a(248),j=a(5),k=a(247),l=a(0),m=["getCellStyle","tr"],n=["getCellStyle","tr"],o=Array.isArray,p=function(a){var b=[];return a.children&&g.Children.forEach(a.children,function(a){a&&(o(a)?b.concat(a):b.push(a))}),b},q=function(a,b){return(0,h.J_)(a,{doCallFunction:!0})(b)},r=function(a){var c=a.getCellStyle,b=(a.tr,(0,f.Z)(a,m)),d=p(b);return(0,l.jsx)(k.default,(0,e.Z)((0,e.Z)({},b),{},{rowCount:1,cellRenderer:function(a){var b=a.columnIndex,f=a.rowIndex,j=(a.isScrolling,a.isVisible,a.style);if(a.parent,!d.hasOwnProperty(b))return null;var k=d[b].props.header,i=f+"-"+b,m={key:i,columnIndex:b,rowIndex:f,style:t.inner},g=(0,e.Z)((0,e.Z)({},t.headerCell),j),n=q(k,m,g);return b||(g.borderRadius=".28571429rem 0 0"),(0,l.jsx)(h.iX,{className:"rv-header",style:c(g,f,b),children:n},i)},style:t.header}))},s=function(a){var c=a.getCellStyle,d=a.tr,b=(0,f.Z)(a,n),g=p(b);return(0,l.jsx)(k.default,(0,e.Z)((0,e.Z)({},b),{},{cellRenderer:function(a){var b=a.columnIndex,f=a.rowIndex,o=(a.isScrolling,a.isVisible,a.style);if(a.parent,!g.hasOwnProperty(b))return null;var i,k,p=g[b].props.cell,m=f+"-"+b,r={key:m,columnIndex:b,rowIndex:f,style:t.inner},s=q(p,r),n=(i=d,k=f,(0,h.J_)(i,{doCallFunction:!0})({rowIndex:k})),u=(0,e.Z)((0,e.Z)((0,e.Z)({},(0,j.ZP)(n,["props","style"],[])),t.cell),o);return(0,l.jsx)(h.iX,{style:c(u,f,b),className:(0,h.Jx)((0,j.ZP)(n,["props","className"]),"rv-body"),children:s},m)},style:t.body}))},t={inner:{height:"100%"},cell:{padding:5,borderLeft:"1px solid rgba(34, 36, 38, 0.1)",borderTop:"1px solid rgba(34, 36, 38, 0.1)"},headerCell:{padding:5,borderLeft:"1px solid rgba(34, 36, 38, 0.1)",borderTop:"1px solid rgba(34, 36, 38, 0.1)",whiteSpace:"nowrap",lineHeight:"30px",background:"#f9fafb"},header:{overflowX:"hidden",overflowY:"hidden"},body:{overflowX:"scroll",overflowY:"scroll"}},u=["style","headerHeight","scrollbarWidth","getHeaderCellStyle","getBodyCellStyle","getColWidth","columnCount"],c=function(a){var b=a.style,c=a.headerHeight,d=a.scrollbarWidth,j=a.getHeaderCellStyle,k=a.getBodyCellStyle,m=a.getColWidth,n=a.columnCount,o=(0,f.Z)(a,u);return(0,l.jsx)(i.Ew,{children:function(a){a.clientHeight,a.clientWidth;var f=a.onScroll,p=(a.scrollHeight,a.scrollLeft);return a.scrollTop,a.scrollWidth,b||(b=w.container),n=n||g.Children.count(o.children),(0,l.jsx)(i.qj,{children:function(g){var a=g.width,q=g.height;return(0,l.jsxs)(h.iX,{style:(0,e.Z)((0,e.Z)({},b),{},{width:a,height:q}),children:[(0,l.jsx)(i.cC,{width:a,columnCount:n,children:function(a){var b=a.adjustedWidth,f=a.columnWidth,d=a.registerChild;return(0,l.jsx)(r,(0,e.Z)((0,e.Z)({},o),{},{registerChild:d,height:c,rowHeight:c,scrollLeft:p,width:b,getCellStyle:j,getColWidth:m||function(){return f}}))}}),(0,l.jsx)(i.cC,{width:a,columnCount:n,children:function(a){var b=a.adjustedWidth,h=a.columnWidth,g=a.registerChild;return(0,l.jsx)(s,(0,e.Z)((0,e.Z)({},o),{},{registerChild:g,onScroll:f,height:q-c,width:b+d,getCellStyle:k,getColWidth:m||function(){return h}}))}})]})}})}})};c.defaultProps={scrollbarWidth:19,headerHeight:40,getHeaderCellStyle:function(a,b,c){return a},getBodyCellStyle:function(a,b,c){return a}};let v=c;var w={container:{borderRight:"1px solid rgba(34, 36, 38, 0.1)",borderBottom:"1px solid rgba(34, 36, 38, 0.1)",borderRadius:".28571429rem",width:"100%"}}}}]) -------------------------------------------------------------------------------- /assets/main.174d3e3.bundle.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var c={150(k,l,b){var m,n,o,p,q,c=b(151),r=b(2),a=b(1),s=b(22),t=b(36),u=b(16),v=b(74),d=b(137),w=b(468),e=b(23),x=["children"],y=(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(51)]).then(b.bind(b,415))}),z=(0,e.Su)({sideWidth:160,active:!0}),f=function(b){var c=b.children,d=(0,w.Z)(b,x);return(0,a.createElement)(z,(0,r.Z)((0,r.Z)({},d),{},{body:c,menu:y,key:"doc"}))};let A=f;var B=b(0),C={Atoms:(0,a.lazy)(function(){return b.e(20).then(b.bind(b,391))}),Molecules:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(21)]).then(b.bind(b,392))}),Organisms:(0,a.lazy)(function(){return b.e(13).then(b.bind(b,393))}),Suggestion:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(3),b.e(25)]).then(b.bind(b,394))}),D3:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(1),b.e(4),b.e(29)]).then(b.bind(b,395))}),D3UmlPerf:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(1),b.e(4),b.e(48)]).then(b.bind(b,397))}),Icons:(0,a.lazy)(function(){return b.e(19).then(b.bind(b,398))}),List:(0,a.lazy)(function(){return b.e(14).then(b.bind(b,399))}),Carousel:(0,a.lazy)(function(){return b.e(10).then(b.bind(b,400))}),Animation:(0,a.lazy)(function(){return b.e(15).then(b.bind(b,401))}),Popup:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(16)]).then(b.bind(b,402))}),Parallax:(0,a.lazy)(function(){return b.e(17).then(b.bind(b,403))}),Video:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(11)]).then(b.bind(b,404))}),Code:(0,a.lazy)(function(){return Promise.all([b.e(2),b.e(49)]).then(b.bind(b,405))}),AsciiDoc:(0,a.lazy)(function(){return b.e(12).then(b.bind(b,406))}),GrapesJs:(0,a.lazy)(function(){return Promise.all([b.e(2),b.e(24)]).then(b.bind(b,407))}),PDF:(0,a.lazy)(function(){return b.e(18).then(b.bind(b,408))}),JSON:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(9)]).then(b.bind(b,409))}),Tomato:(0,a.lazy)(function(){return Promise.all([b.e(1),b.e(50)]).then(b.bind(b,413))}),Form:(0,a.lazy)(function(){return Promise.all([b.e(0),b.e(3),b.e(30)]).then(b.bind(b,414))})},g=function(a){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(s.z1,{initStates:["tplProps","pageName"],children:function(b){var c=b.tplProps,d=b.pageName;return(0,B.jsx)(A,(0,r.Z)((0,r.Z)({},c),{},{className:d,children:(0,B.jsx)(t.lw,(0,r.Z)((0,r.Z)({},a),{},{themes:C,defaultThemePath:"Atoms"}))}))}}),m||(m=(0,B.jsx)(v.t,{ajax:!0})),n||(n=(0,B.jsx)(d.ny,{})),o||(o=(0,B.jsx)(s.an,{})),p||(p=(0,B.jsx)(u.EK,{}))]})};let h=g;var D=b(8),E=b(7),i=function(a,b){return console.log("action",b),a},j=function(b,c){if(q){var a;(0,E.ZP)(null===(a=(0,D.p_)().i13n)|| void 0===a?void 0:a.dispatch,["impression"])}else q=!0;return b};(0,d.C0)("config/set",{actionHandler:i,impressionHandler:j}),(0,c.Z)(h)}},d={};function a(e){var f=d[e];if(void 0!==f)return f.exports;var b=d[e]={id:e,loaded:!1,exports:{}};return c[e].call(b.exports,b,b.exports,a),b.loaded=!0,b.exports}a.m=c,(()=>{var b=[];a.O=(i,e,f,d)=>{if(e){d=d||0;for(var c=b.length;c>0&&b[c-1][2]>d;c--)b[c]=b[c-1];b[c]=[e,f,d];return}for(var g=1/0,c=0;c=d&&Object.keys(a.O).every(b=>a.O[b](e[h]))?e.splice(h--,1):(j=!1,d{var b=c&&c.__esModule?()=>c.default:()=>c;return a.d(b,{a:b}),b},a.d=(d,c)=>{for(var b in c)a.o(c,b)&&!a.o(d,b)&&Object.defineProperty(d,b,{enumerable:!0,get:c[b]})},a.f={},a.e=b=>Promise.all(Object.keys(a.f).reduce((c,d)=>(a.f[d](b,c),c),[])),a.u=b=>""+b+"."+a.h().slice(0,7)+".bundle.js",a.h=()=>"174d3e37da33ad65217e",a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(a){if("object"==typeof window)return window}}(),a.o=(a,b)=>Object.prototype.hasOwnProperty.call(a,b),(()=>{var b={};a.l=(d,g,k,l)=>{if(b[d]){b[d].push(g);return}if(void 0!==k)for(var c,h,i=document.getElementsByTagName("script"),e=0;e{c.onerror=c.onload=null,clearTimeout(m);var e=b[d];if(delete b[d],c.parentNode&&c.parentNode.removeChild(c),e&&e.forEach(a=>a(f)),a)return a(f)},m=setTimeout(f.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=f.bind(null,c.onerror),c.onload=f.bind(null,c.onload),h&&document.head.appendChild(c)}})(),a.r=a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})},a.nmd=a=>(a.paths=[],a.children||(a.children=[]),a),a.p="./assets/",(()=>{var d={7:0};a.f.j=(b,e)=>{var c=a.o(d,b)?d[b]:void 0;if(0!==c){if(c)e.push(c[2]);else{var f=new Promise((a,e)=>c=d[b]=[a,e]);e.push(c[2]=f);var g=a.p+a.u(b),i=new Error,h=e=>{if(a.o(d,b)&&(0!==(c=d[b])&&(d[b]=void 0),c)){var f=e&&("load"===e.type?"missing":e.type),g=e&&e.target&&e.target.src;i.message="Loading chunk "+b+" failed.\n("+f+": "+g+")",i.name="ChunkLoadError",i.type=f,i.request=g,c[1](i)}};a.l(g,h,"chunk-"+b,b)}}},a.O.j=a=>0===d[a];var c=(h,i)=>{var c,b,[e,f,j]=i,g=0;if(e.some(a=>0!==d[a])){for(c in f)a.o(f,c)&&(a.m[c]=f[c]);if(j)var k=j(a)}for(h&&h(i);ga(150));b=a.O(b)})() -------------------------------------------------------------------------------- /assets/push.nginx.conf: -------------------------------------------------------------------------------- 1 | # Automatically generated by NginxPushWebpackPlugin, don't change it manually 2 | # Please include this file in your nginx web server directive 3 | # ``` 4 | # include push.nginx.conf; 5 | # ``` 6 | http2_push ./assets/main.174d3e3.bundle.js?174d3e3; 7 | http2_push ./assets/lib.174d3e3.bundle.js?174d3e3; 8 | http2_push ./assets/vendor.174d3e3.bundle.js?174d3e3; -------------------------------------------------------------------------------- /assets/stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "main": [ 4 | "main.174d3e3.bundle.js" 5 | ], 6 | "lib": [ 7 | "lib.174d3e3.bundle.js" 8 | ], 9 | "vendor": [ 10 | "vendor.174d3e3.bundle.js" 11 | ] 12 | }, 13 | "assets": { 14 | "main.174d3e3.bundle.js": { 15 | "name": "main.174d3e3.bundle.js", 16 | "publicPath": "./assets/main.174d3e3.bundle.js?174d3e3", 17 | "path": "/Users/hill/git/react-atomic-ui/assets/main.174d3e3.bundle.js" 18 | }, 19 | "lib.174d3e3.bundle.js": { 20 | "name": "lib.174d3e3.bundle.js", 21 | "publicPath": "./assets/lib.174d3e3.bundle.js?174d3e3", 22 | "path": "/Users/hill/git/react-atomic-ui/assets/lib.174d3e3.bundle.js" 23 | }, 24 | "vendor.174d3e3.bundle.js": { 25 | "name": "vendor.174d3e3.bundle.js", 26 | "publicPath": "./assets/vendor.174d3e3.bundle.js?174d3e3", 27 | "path": "/Users/hill/git/react-atomic-ui/assets/vendor.174d3e3.bundle.js" 28 | } 29 | }, 30 | "publicPath": "./assets/", 31 | "status": "done" 32 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require("react-atomic-atom/babel.config"); 2 | -------------------------------------------------------------------------------- /compile.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | DIR=$( 4 | cd "$(dirname "$0")" 5 | pwd -P 6 | ) 7 | CHK_PHP=$(which php 2>/dev/null) 8 | PHP_CONFIG=$DIR/cnfig/config.php 9 | YO_CONFIG=$DIR/.yo 10 | WEBPACK_SERVER_CONFIG="--config webpack.server.mjs" 11 | 12 | cd $DIR 13 | webpackEnabled=$([ -e "$YO_CONFIG" ] && awk -F "=" '/^webpackEnabled/ {print $2}' $YO_CONFIG) 14 | serverEnabled=$([ -e "$YO_CONFIG" ] && awk -F "=" '/^serverEnabled/ {print $2}' $YO_CONFIG) 15 | assetsRoot=$([ -e "$YO_CONFIG" ] && awk -F "=" '/^assetsRoot/ {print $2}' $YO_CONFIG) 16 | HTDOCS=${DIR}$([ -e "$YO_CONFIG" ] && awk -F "=" '/^HTDOCS/ {print $2}' $YO_CONFIG) 17 | SWJS=${HTDOCS}/service-worker.js 18 | if [ ! -z "$CHK_PHP" ] && [ -s "$PHP_CONFIG" ]; then 19 | conf=`DUMP=cli php -r "include('$PHP_CONFIG');"` 20 | else 21 | conf='{' 22 | conf+='"assetsRoot":"'${assetsRoot:-"./assets/"}'",' 23 | conf+='"externals":{},' 24 | if [ -z "$serverEnabled" ]; then 25 | conf+='"indexTpl":"'${DIR}/index.tpl'",' 26 | conf+='"indexHtml":"'${DIR}/index.html'",' 27 | conf+='"bustMode":"name",' 28 | fi 29 | conf+='"swDest":"'${SWJS}'",' 30 | # conf+='"swDebug":true,' 31 | conf+='"hotPort": "'${hotPort:-3088}'"' 32 | conf+='}' 33 | fi 34 | echo $conf; 35 | 36 | 37 | OPEN=$(which xdg-open 2> /dev/null) 38 | if [ -z "$OPEN" ]; then 39 | OPEN="open" 40 | fi 41 | 42 | if [ "x$webpackEnabled" == "xon" ]; then 43 | webpack='npm run webpack --' 44 | fi 45 | 46 | killBy() { 47 | ps -eo pid,args | grep $1 | grep -v grep | awk '{print $1}' | xargs -I{} kill -9 {} 48 | } 49 | 50 | stopServer() { 51 | killBy ${DIR}/node_modules/.bin/ws 52 | echo "stop server done" 53 | } 54 | 55 | startServer() { 56 | stopServer 57 | yarn 58 | if [ ! -e "build" ]; then 59 | develop 60 | fi 61 | port=${port-3000} 62 | echo "Start server" 63 | if [ "$1" == "open" ]; then 64 | npm run start -- -p $port & 65 | sleep 3 66 | $OPEN http://localhost:$port 67 | else 68 | npm run start -- -p $port -v 69 | fi 70 | } 71 | 72 | stop() { 73 | killBy ${DIR}/node_modules/.bin/babel 74 | if [ ! -z "$webpack" ]; then 75 | cat webpack.pid | xargs -I{} kill -9 {} 76 | npm run clean:webpack 77 | rm $HTDOCS/workbox-*.js 78 | fi 79 | [ -e "$SWJS" ] && rm $SWJS 80 | echo "Stop done" 81 | } 82 | 83 | production() { 84 | stop 85 | echo "Production Mode" 86 | npm run build 87 | if [ ! -z "$webpack" ]; then 88 | ENABLE_SW=1 CONFIG=$conf NODE_ENV=production $webpack 89 | if [ ! -z "$serverEnabled" ]; then 90 | ENABLE_SW=1 CONFIG=$conf NODE_ENV=production $webpack $WEBPACK_SERVER_CONFIG 91 | fi 92 | fi 93 | } 94 | 95 | analyzer() { 96 | stop 97 | echo "Analyzer Mode" 98 | npm run build 99 | [ ! -z "$webpack" ] && CONFIG=$conf BUNDLE='{}' $webpack 100 | } 101 | 102 | develop() { 103 | stop 104 | echo "Develop Mode" 105 | npm run build 106 | [ ! -z "$webpack" ] && CONFIG=$conf $webpack && [ ! -z "$serverEnabled" ] && CONFIG=$conf $webpack $WEBPACK_SERVER_CONFIG 107 | } 108 | 109 | watch() { 110 | echo "Watch Mode" 111 | npm run build:es -- --watch & 112 | } 113 | 114 | hot() { 115 | stop 116 | echo "Hot Mode" 117 | npm run build:es -- --watch & 118 | [ ! -z "$webpack" ] && sleep 10 && HOT_UPDATE=1 CONFIG=$conf $webpack serve & 119 | } 120 | 121 | nodeTest(){ 122 | theme=$1 123 | if [ -z "$theme" ]; then 124 | theme="Hello" 125 | fi 126 | echo "Theme Path: ${theme}" 127 | echo '{"themePath":"'${theme}'"}' | node ./server.js 128 | echo "" 129 | } 130 | 131 | case "$1" in 132 | node) 133 | nodeTest $2 134 | ;; 135 | p) 136 | production 137 | ;; 138 | a) 139 | analyzer 140 | ;; 141 | s) 142 | startServer $2 143 | ;; 144 | ss) 145 | stopServer 146 | ;; 147 | hot) 148 | hot 149 | ;; 150 | watch) 151 | watch 152 | ;; 153 | stop) 154 | stop 155 | ;; 156 | *) 157 | develop 158 | exit 0 159 | ;; 160 | esac 161 | 162 | exit $? 163 | -------------------------------------------------------------------------------- /data/env: -------------------------------------------------------------------------------- 1 | pomodoro_tip[]=決定待完成的任務 2 | pomodoro_tip[]=設定番茄工作法定時器至 n 分鐘（通常為25分鐘）。 3 | pomodoro_tip[]=持續工作直至定時器提示,記下一個番茄。 4 | pomodoro_tip[]=短暫休息 5 分鐘。 5 | pomodoro_tip[]=每四個番茄，休息15-30分鐘。 6 | -------------------------------------------------------------------------------- /data/stock.json: -------------------------------------------------------------------------------- 1 | [{"t":20180112,"o":83.55,"h":84.2,"l":83.5,"c":84.1,"v":2865},{"t":20180115,"o":84.55,"h":84.7,"l":84.4,"c":84.65,"v":2805},{"t":20180116,"o":84.65,"h":85.0,"l":84.5,"c":85.0,"v":3943},{"t":20180117,"o":84.65,"h":85.45,"l":84.65,"c":85.15,"v":5689},{"t":20180118,"o":85.5,"h":86.55,"l":85.5,"c":86.3,"v":6884},{"t":20180119,"o":86.35,"h":87.15,"l":86.35,"c":87.15,"v":5285},{"t":20180122,"o":87.15,"h":87.95,"l":87.15,"c":87.95,"v":4423},{"t":20180123,"o":88.05,"h":88.4,"l":87.9,"c":88.3,"v":5784},{"t":20180124,"o":88.0,"h":88.0,"l":86.85,"c":87.2,"v":5090},{"t":20180125,"o":87.25,"h":88.3,"l":87.15,"c":87.45,"v":4971},{"t":20180126,"o":87.45,"h":87.6,"l":86.85,"c":87.5,"v":7764},{"t":20180129,"o":85.5,"h":86.15,"l":85.2,"c":85.55,"v":6436},{"t":20180130,"o":85.2,"h":85.35,"l":84.5,"c":84.55,"v":4949},{"t":20180131,"o":84.4,"h":85.0,"l":84.15,"c":84.65,"v":4241},{"t":20180201,"o":84.75,"h":85.5,"l":84.75,"c":85.25,"v":2908},{"t":20180202,"o":84.85,"h":85.15,"l":84.35,"c":84.9,"v":3074},{"t":20180205,"o":83.2,"h":83.75,"l":82.9,"c":83.6,"v":7055},{"t":20180206,"o":80.85,"h":81.1,"l":78.8,"c":79.65,"v":32195},{"t":20180207,"o":81.35,"h":81.4,"l":80.6,"c":80.65,"v":10163},{"t":20180208,"o":80.65,"h":80.95,"l":80.3,"c":80.6,"v":4495},{"t":20180209,"o":78.6,"h":79.2,"l":78.0,"c":79.05,"v":16173},{"t":20180212,"o":79.55,"h":79.9,"l":79.4,"c":79.7,"v":8419},{"t":20180221,"o":81.4,"h":81.7,"l":81.1,"c":81.5,"v":11626},{"t":20180222,"o":81.5,"h":81.5,"l":80.75,"c":81.0,"v":3724},{"t":20180223,"o":81.4,"h":82.1,"l":81.4,"c":82.0,"v":3567},{"t":20180226,"o":82.55,"h":82.8,"l":82.35,"c":82.4,"v":3276},{"t":20180227,"o":83.1,"h":83.2,"l":82.35,"c":82.35,"v":7648},{"t":20180301,"o":81.55,"h":81.95,"l":81.15,"c":81.75,"v":4330},{"t":20180302,"o":80.85,"h":81.2,"l":80.45,"c":81.15,"v":6237},{"t":20180305,"o":81.1,"h":81.5,"l":80.65,"c":80.75,"v":3708},{"t":20180306,"o":81.65,"h":82.15,"l":81.6,"c":82.15,"v":5516},{"t":20180307,"o":81.75,"h":82.45,"l":81.7,"c":81.8,"v":2604},{"t":20180308,"o":82.15,"h":82.8,"l":82.15,"c":82.75,"v":3217},{"t":20180309,"o":82.9,"h":83.0,"l":82.7,"c":82.85,"v":2823},{"t":20180312,"o":83.6,"h":84.25,"l":83.55,"c":84.15,"v":8730},{"t":20180313,"o":84.35,"h":84.95,"l":84.3,"c":84.95,"v":9820},{"t":20180314,"o":84.35,"h":84.45,"l":84.0,"c":84.3,"v":3400},{"t":20180315,"o":84.0,"h":84.3,"l":83.9,"c":84.25,"v":3495},{"t":20180316,"o":84.0,"h":84.2,"l":83.1,"c":83.9,"v":5500},{"t":20180319,"o":83.65,"h":84.1,"l":83.45,"c":83.85,"v":2025},{"t":20180320,"o":83.2,"h":83.8,"l":83.2,"c":83.8,"v":2888},{"t":20180321,"o":83.8,"h":84.1,"l":83.6,"c":83.85,"v":4884},{"t":20180322,"o":84.0,"h":84.6,"l":83.45,"c":83.55,"v":3422},{"t":20180323,"o":81.85,"h":82.4,"l":81.8,"c":82.1,"v":8034},{"t":20180326,"o":81.85,"h":82.2,"l":81.6,"c":82.2,"v":4359},{"t":20180327,"o":83.0,"h":83.4,"l":82.95,"c":83.4,"v":3273},{"t":20180328,"o":82.9,"h":82.9,"l":82.2,"c":82.25,"v":4145},{"t":20180329,"o":82.25,"h":82.35,"l":81.8,"c":82.1,"v":4092},{"t":20180330,"o":82.65,"h":83.05,"l":82.65,"c":82.85,"v":4979},{"t":20180331,"o":82.85,"h":83.05,"l":82.75,"c":82.95,"v":869},{"t":20180402,"o":82.85,"h":82.95,"l":82.15,"c":82.25,"v":3725},{"t":20180403,"o":81.5,"h":81.55,"l":81.2,"c":81.5,"v":6169},{"t":20180409,"o":82.15,"h":82.3,"l":81.6,"c":82.2,"v":3391},{"t":20180410,"o":82.1,"h":82.85,"l":81.75,"c":82.5,"v":3849},{"t":20180411,"o":82.9,"h":83.1,"l":82.75,"c":82.85,"v":2593},{"t":20180412,"o":83.05,"h":83.15,"l":82.25,"c":82.5,"v":3591},{"t":20180413,"o":82.7,"h":82.8,"l":82.3,"c":82.5,"v":2982},{"t":20180416,"o":82.65,"h":82.65,"l":82.0,"c":82.3,"v":1801},{"t":20180417,"o":82.4,"h":82.4,"l":81.35,"c":81.4,"v":4306},{"t":20180418,"o":81.6,"h":82.1,"l":81.35,"c":81.6,"v":3727},{"t":20180419,"o":81.9,"h":82.65,"l":81.9,"c":82.65,"v":4454},{"t":20180420,"o":81.0,"h":81.1,"l":80.5,"c":80.75,"v":8994},{"t":20180423,"o":80.25,"h":80.45,"l":79.9,"c":79.95,"v":10601},{"t":20180424,"o":79.9,"h":79.95,"l":79.05,"c":79.55,"v":16842},{"t":20180425,"o":79.25,"h":79.3,"l":78.8,"c":79.3,"v":16445},{"t":20180426,"o":79.7,"h":79.7,"l":78.8,"c":79.05,"v":16466},{"t":20180427,"o":79.6,"h":79.65,"l":78.8,"c":79.2,"v":12371},{"t":20180430,"o":79.65,"h":80.15,"l":79.05,"c":80.0,"v":6502},{"t":20180502,"o":80.05,"h":80.15,"l":79.4,"c":79.4,"v":5485},{"t":20180503,"o":79.05,"h":79.05,"l":78.35,"c":78.55,"v":8789},{"t":20180504,"o":78.55,"h":79.0,"l":78.4,"c":78.95,"v":3452},{"t":20180507,"o":79.5,"h":79.55,"l":78.8,"c":79.5,"v":3841},{"t":20180508,"o":79.4,"h":80.05,"l":79.35,"c":80.0,"v":5336},{"t":20180509,"o":80.0,"h":80.55,"l":80.0,"c":80.45,"v":3341},{"t":20180510,"o":80.7,"h":80.7,"l":80.45,"c":80.65,"v":5963},{"t":20180511,"o":81.1,"h":81.7,"l":81.05,"c":81.6,"v":17632},{"t":20180514,"o":82.0,"h":82.6,"l":81.9,"c":82.5,"v":17180},{"t":20180515,"o":82.35,"h":82.4,"l":81.65,"c":81.65,"v":7204},{"t":20180516,"o":81.45,"h":81.8,"l":81.4,"c":81.75,"v":8283},{"t":20180517,"o":81.95,"h":82.0,"l":81.2,"c":81.2,"v":1928},{"t":20180518,"o":81.2,"h":81.5,"l":80.85,"c":80.95,"v":2350}] 2 | -------------------------------------------------------------------------------- /google5e6918457f15c231.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google5e6918457f15c231.html -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /index.tpl: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "description": "React Atomic documentation and examples", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/react-atomic/react-atomic-ui" 7 | }, 8 | "keywords": [ 9 | "react", 10 | "react-component", 11 | "atomic-ui" 12 | ], 13 | "author": "Hill ", 14 | "license": "MIT", 15 | "dependencies": { 16 | "ajax-save": "*", 17 | "fixed-data-table-2": "*", 18 | "get-object-value": "*", 19 | "get-scroll-info": "*", 20 | "organism-react-ajax": "*", 21 | "organism-react-animate": "*", 22 | "organism-react-asciidoc": "*", 23 | "organism-react-carousel": "*", 24 | "organism-react-code": "*", 25 | "organism-react-codeeditor": "*", 26 | "organism-react-d3-axis-chart": "*", 27 | "organism-react-d3-piechart": "*", 28 | "organism-react-d3-uml": "*", 29 | "organism-react-dropzone": "*", 30 | "organism-react-facebook": "*", 31 | "organism-react-grapesjs": "*", 32 | "organism-react-html2canvas": "*", 33 | "organism-react-i13n": "*", 34 | "organism-react-navigation": "*", 35 | "organism-react-parallax": "*", 36 | "organism-react-popup": "*", 37 | "organism-react-progress": "*", 38 | "organism-react-qq-video": "*", 39 | "organism-react-select-filter": "*", 40 | "organism-react-spotlight": "*", 41 | "organism-react-stockcharts": "*", 42 | "organism-react-tag-highlight": "*", 43 | "organism-react-tag-input": "*", 44 | "organism-react-video": "*", 45 | "pmvc_react_admin": "*", 46 | "pmvc_react_list": "*", 47 | "prettyjson": "1.2.1", 48 | "react": "^18.x", 49 | "react-dom": "^18.x", 50 | "react-virtualized": "*", 51 | "reshow-app": "*", 52 | "reshow-url": "*", 53 | "ricon": "*" 54 | }, 55 | "scripts": { 56 | "update-compile-sh": "yo reshow:compile-sh", 57 | "webpack": "webpack", 58 | "start": "ws", 59 | "format": "prettier-eslint --write 'src/**/*.js' 'ui/**/*.js*'", 60 | "clean:webpack": "find ./assets -name '*.*' | xargs rm -rf", 61 | "clean": "find ./build -name '*.*' | xargs rm -rf", 62 | "build:es": "BABEL_ENV=es babel src -d build/es/src --out-file-extension .mjs", 63 | "build": "npm run clean && npm run build:es", 64 | "mochaFor": "STRICT_MODE=on mocha -r global-jsdom/register", 65 | "mocha": "npm run mochaFor -- 'build/es/**/__tests__/*.mjs'", 66 | "test": "npm run build && npm run mocha", 67 | "prepublishOnly": "exit 1;" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /resource/audio/clock.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-atomic/react-atomic-ui/bea22a2dfd53c78d485fb04b66e3da125e62ac52/resource/audio/clock.mp3 -------------------------------------------------------------------------------- /screen.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | SCREEN_NAME=`basename "$PWD"` 4 | 5 | exec() { 6 | tabName=$1 7 | cmd=$2 8 | echo $tabName 9 | if ! screen -list | grep -q "${SCREEN_NAME}"; then 10 | screen -dmS ${SCREEN_NAME}; 11 | sleep 1; 12 | fi 13 | screen -S ${SCREEN_NAME} -X screen -t ${tabName} 14 | screen -S ${SCREEN_NAME} -p ${tabName} -X stuff "$cmd^M"; 15 | } 16 | 17 | case "$1" in 18 | enter) 19 | screen -rd $SCREEN_NAME 20 | ;; 21 | stopall) 22 | screen -X -S ${SCREEN_NAME} quit 23 | ;; 24 | startall) 25 | exec "server" "./compile.sh s" 26 | exec "hot" "./compile.sh hot" 27 | echo "run 'screen -r $SCREEN_NAME' or './screen.sh enter' to enter screen" 28 | ;; 29 | *) 30 | echo $"Usage: $0 {startall|stopall|enter}" 31 | exit 1 32 | esac 33 | 34 | exit $? 35 | -------------------------------------------------------------------------------- /service-worker.js: -------------------------------------------------------------------------------- 1 | if(!self.define){let s,e={};const l=(l,n)=>(l=new URL(l+".js",n).href,e[l]||new Promise((e=>{if("document"in self){const s=document.createElement("script");s.src=l,s.onload=e,document.head.appendChild(s)}else s=l,importScripts(l),e()})).then((()=>{let s=e[l];if(!s)throw new Error(`Module ${l} didn’t register its module`);return s})));self.define=(n,u)=>{const r=s||("document"in self?document.currentScript.src:"")||location.href;if(e[r])return;let i={};const d=s=>l(s,r),t={module:{uri:r},exports:i,require:d};e[r]=Promise.all(n.map((s=>t[s]||d(s)))).then((s=>(u(...s),i)))}}define(["./workbox-660396c1"],(function(s){"use strict";self.skipWaiting(),s.clientsClaim(),s.precacheAndRoute([{url:"./assets/../index.html",revision:"461c088c12d629de191bdcf63c78238f"},{url:"./assets/0.174d3e3.bundle.js",revision:null},{url:"./assets/1.174d3e3.bundle.js",revision:null},{url:"./assets/10.174d3e3.bundle.js",revision:null},{url:"./assets/11.174d3e3.bundle.js",revision:null},{url:"./assets/12.174d3e3.bundle.js",revision:null},{url:"./assets/13.174d3e3.bundle.js",revision:null},{url:"./assets/14.174d3e3.bundle.js",revision:null},{url:"./assets/15.174d3e3.bundle.js",revision:null},{url:"./assets/16.174d3e3.bundle.js",revision:null},{url:"./assets/17.174d3e3.bundle.js",revision:null},{url:"./assets/18.174d3e3.bundle.js",revision:null},{url:"./assets/19.174d3e3.bundle.js",revision:null},{url:"./assets/2.174d3e3.bundle.js",revision:null},{url:"./assets/20.174d3e3.bundle.js",revision:null},{url:"./assets/21.174d3e3.bundle.js",revision:null},{url:"./assets/22.174d3e3.bundle.js",revision:null},{url:"./assets/23.174d3e3.bundle.js",revision:null},{url:"./assets/24.174d3e3.bundle.js",revision:null},{url:"./assets/25.174d3e3.bundle.js",revision:null},{url:"./assets/26.174d3e3.bundle.js",revision:null},{url:"./assets/27.174d3e3.bundle.js",revision:null},{url:"./assets/28.174d3e3.bundle.js",revision:null},{url:"./assets/29.174d3e3.bundle.js",revision:null},{url:"./assets/3.174d3e3.bundle.js",revision:null},{url:"./assets/30.174d3e3.bundle.js",revision:null},{url:"./assets/31.174d3e3.bundle.js",revision:null},{url:"./assets/32.174d3e3.bundle.js",revision:null},{url:"./assets/33.174d3e3.bundle.js",revision:null},{url:"./assets/34.174d3e3.bundle.js",revision:null},{url:"./assets/35.174d3e3.bundle.js",revision:null},{url:"./assets/36.174d3e3.bundle.js",revision:null},{url:"./assets/37.174d3e3.bundle.js",revision:null},{url:"./assets/38.174d3e3.bundle.js",revision:null},{url:"./assets/39.174d3e3.bundle.js",revision:null},{url:"./assets/4.174d3e3.bundle.js",revision:null},{url:"./assets/40.174d3e3.bundle.js",revision:null},{url:"./assets/41.174d3e3.bundle.js",revision:null},{url:"./assets/42.174d3e3.bundle.js",revision:null},{url:"./assets/43.174d3e3.bundle.js",revision:null},{url:"./assets/44.174d3e3.bundle.js",revision:null},{url:"./assets/45.174d3e3.bundle.js",revision:null},{url:"./assets/46.174d3e3.bundle.js",revision:null},{url:"./assets/47.174d3e3.bundle.js",revision:null},{url:"./assets/48.174d3e3.bundle.js",revision:null},{url:"./assets/49.174d3e3.bundle.js",revision:null},{url:"./assets/5.174d3e3.bundle.js",revision:null},{url:"./assets/50.174d3e3.bundle.js",revision:null},{url:"./assets/51.174d3e3.bundle.js",revision:null},{url:"./assets/52.174d3e3.bundle.js",revision:null},{url:"./assets/53.174d3e3.bundle.js",revision:null},{url:"./assets/54.174d3e3.bundle.js",revision:null},{url:"./assets/55.174d3e3.bundle.js",revision:null},{url:"./assets/9.174d3e3.bundle.js",revision:null},{url:"./assets/dagre.15783da.bundle.worker.js",revision:null},{url:"./assets/lib.174d3e3.bundle.js",revision:null},{url:"./assets/main.174d3e3.bundle.js",revision:null},{url:"./assets/vendor.174d3e3.bundle.js",revision:null},{url:"./assets/worker.fe6f7bb.bundle.worker.js",revision:null}],{ignoreURLParametersMatching:[/.*/]}),s.cleanupOutdatedCaches(),s.registerRoute(/^(http)(s)?(\:\/\/).*\.(?:css)$/,new s.CacheFirst({cacheName:"css",plugins:[new s.ExpirationPlugin({maxEntries:10})]}),"GET"),s.registerRoute(/^(http)(s)?(\:\/\/).*\.(?:env|md|json|adoc)/,new s.CacheFirst({cacheName:"data",plugins:[new s.ExpirationPlugin({maxEntries:5})]}),"GET"),s.registerRoute(/^(http)(s)?(\:\/\/).*\/(?:env)/,new s.CacheFirst({cacheName:"env",plugins:[new s.ExpirationPlugin({maxEntries:5})]}),"GET")})); 2 | -------------------------------------------------------------------------------- /src/client.js: -------------------------------------------------------------------------------- 1 | import client from "reshow-app/client"; 2 | import app from "./ui/pages/index"; 3 | import i13n from "./i13n"; 4 | 5 | export default client(app); 6 | -------------------------------------------------------------------------------- /src/i13n.js: -------------------------------------------------------------------------------- 1 | import { i13nDispatch } from "organism-react-i13n"; 2 | import { win } from "win-doc"; 3 | import callfunc from "call-func"; 4 | 5 | let init; 6 | 7 | const actionHandler = (state, action) => { 8 | console.log("action", action); 9 | return state; 10 | }; 11 | 12 | const impressionHandler = (state, action) => { 13 | if (init) { 14 | callfunc(win().i13n?.dispatch, ["impression"]); 15 | } else { 16 | init = true; 17 | } 18 | return state; 19 | }; 20 | 21 | i13nDispatch("config/set", { 22 | actionHandler, 23 | impressionHandler, 24 | }); 25 | -------------------------------------------------------------------------------- /src/ui/molecules/HeaderLink.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { DividingHeader } from "react-atomic-molecule"; 3 | 4 | const HeaderLink = (props) => ( 5 | 11 | ); 12 | 13 | export default HeaderLink; 14 | -------------------------------------------------------------------------------- /src/ui/molecules/Link.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SemanticUI } from "react-atomic-molecule"; 3 | 4 | const Link = (props) => ; 5 | 6 | export default Link; 7 | -------------------------------------------------------------------------------- /src/ui/molecules/Menu.jsx: -------------------------------------------------------------------------------- 1 | import { VerticalMenu } from "pmvc_react_admin"; 2 | import { SideMenu } from "organism-react-navigation"; 3 | import { pageStore, ReLink } from "reshow"; 4 | import { KEYS } from "reshow-constant"; 5 | 6 | const Menu = (props) => { 7 | const thisMenus = {}; 8 | const themes = pageStore.getMap("themes"); 9 | KEYS(themes) 10 | .sort() 11 | .forEach((item) => { 12 | thisMenus[item] = { 13 | ajax: false, 14 | text: item, 15 | href: "#/" + item, 16 | }; 17 | }); 18 | return ( 19 | } 24 | /> 25 | ); 26 | }; 27 | 28 | export default Menu; 29 | -------------------------------------------------------------------------------- /src/ui/organisms/AjaxDownload.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { PageLoadProgressHandler } from "organism-react-progress"; 3 | import { ajaxDispatch } from "organism-react-ajax"; 4 | import { Button } from "react-atomic-molecule"; 5 | import { download } from "ajax-save"; 6 | 7 | const AjaxDownloadExample = (props) => { 8 | const url = 9 | "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"; 10 | return ( 11 | 24 | ); 25 | }; 26 | 27 | export default AjaxDownloadExample; 28 | -------------------------------------------------------------------------------- /src/ui/organisms/AlertsNotifier.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | 3 | import { AlertsNotifier, PopupClick } from "organism-react-popup"; 4 | 5 | class AlertsNotifierExample extends PureComponent { 6 | render() { 7 | return ( 8 | ( 11 | 21 | )} 22 | component={} 23 | > 24 | alert 25 | 26 | ); 27 | } 28 | } 29 | 30 | export default AlertsNotifierExample; 31 | 32 | const Styles = { 33 | click: { 34 | color: "blue", 35 | textDecoration: "underline", 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/ui/organisms/Animation.example.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Animate from "organism-react-animate"; 3 | 4 | const Hello = () =>
Hello world!!
; 5 | const Button = ({ setIsShow, action, children }) => ( 6 | { 10 | e.preventDefault(); 11 | setIsShow(action); 12 | }} 13 | > 14 | {children} 15 | 16 | ); 17 | 18 | const AnimationExample = () => { 19 | const [isShow, setIsShow] = useState(true); 20 | return ( 21 | <> 22 | 28 | {isShow && } 29 | 30 | 33 | 36 | 37 | ); 38 | }; 39 | 40 | export default AnimationExample; 41 | -------------------------------------------------------------------------------- /src/ui/organisms/AnimationChangeStyle.example.jsx: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { useState } from "react"; 3 | import { useLazyInject } from "react-atomic-molecule"; 4 | import { ChangeAnimation } from "organism-react-animate"; 5 | 6 | const AnimationChangeStyleExample = ({initAni="fadeInRight-1000"}) => { 7 | const [animation, setAnimation] = useState(initAni); 8 | injects = useLazyInject(InjectStyles, injects); 9 | const handleEnd = () => { 10 | setAnimation(""); 11 | }; 12 | return ( 13 | <> 14 |
15 | 20 |
abc
21 | 22 |
23 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default AnimationChangeStyleExample; 35 | 36 | let injects; 37 | const InjectStyles = {}; 38 | -------------------------------------------------------------------------------- /src/ui/organisms/AnimationDelay.example.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Animate from "organism-react-animate"; 3 | 4 | const Hello = () =>
Hello
; 5 | const World = () =>
world!!
; 6 | const Button = ({ setIsShow, action, children }) => ( 7 | { 11 | e.preventDefault(); 12 | setIsShow(action); 13 | }} 14 | > 15 | {children} 16 | 17 | ); 18 | 19 | const AnimationDelayExample = () => { 20 | const [isShow, setIsShow] = useState(true); 21 | return ( 22 | <> 23 | 29 | {isShow && } 30 | 31 | 37 | {isShow && } 38 | 39 | 42 | 45 | 46 | ); 47 | }; 48 | 49 | export default AnimationDelayExample; 50 | -------------------------------------------------------------------------------- /src/ui/organisms/AnimationReplace.example.jsx: -------------------------------------------------------------------------------- 1 | import { Replace } from "organism-react-animate"; 2 | 3 | const AnimationReplaceExample = () => ( 4 | 9 |
1
10 |
2
11 |
3
12 | 13 | ); 14 | 15 | export default AnimationReplaceExample; 16 | -------------------------------------------------------------------------------- /src/ui/organisms/AsciiDoc.example.jsx: -------------------------------------------------------------------------------- 1 | import Asciidoc from "organism-react-asciidoc"; 2 | 3 | const adoc = ` 4 | :toc: 5 | :toc-placement!: 6 | toc::[] 7 | 8 | = h1 - test 9 | test 10 | 11 | == h2 - test2 12 | * Hello *world* 13 | 14 | == h2 - test3 15 | - [ ] option1 16 | - [*] option1 17 | `; 18 | 19 | const AsciidocDemo = (props) => ( 20 | {adoc} 21 | ); 22 | 23 | export default AsciidocDemo; 24 | -------------------------------------------------------------------------------- /src/ui/organisms/CarouselAnimation.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Image } from "react-atomic-molecule"; 3 | import { Carousel, CarouselAnimation } from "organism-react-carousel"; 4 | 5 | const CarouselAnimationExample = (props) => { 6 | return ( 7 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 3 24 | 4 25 | 5 26 | 27 | ); 28 | }; 29 | 30 | export default CarouselAnimationExample; 31 | 32 | const height = 300; 33 | 34 | const Styles = { 35 | container: { 36 | margin: "0 10%", 37 | }, 38 | carouselList: { 39 | minHeight: height + 5, 40 | }, 41 | carousel: { 42 | width: "100%", 43 | height, 44 | background: "#00558B", 45 | }, 46 | img: { 47 | maxWidth: "100%", 48 | maxHeight: "100%", 49 | verticalAlign: "bottom", 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/ui/organisms/CarouselAnimationHideThumb.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Carousel, CarouselAnimation } from "organism-react-carousel"; 3 | 4 | const CarouselAnimationExample = (props) => { 5 | return ( 6 | 14 | 15 | 19 | 20 | 2 21 | 3 22 | 4 23 | 5 24 | 25 | ); 26 | }; 27 | 28 | export default CarouselAnimationExample; 29 | 30 | const height = 300; 31 | 32 | const Styles = { 33 | container: { 34 | margin: "0 10%", 35 | }, 36 | carouselList: { 37 | minHeight: height + 5, 38 | }, 39 | carousel: { 40 | width: "100%", 41 | height, 42 | background: "#00558B", 43 | }, 44 | img: { 45 | maxWidth: "100%", 46 | verticalAlign: "bottom", 47 | }, 48 | }; 49 | -------------------------------------------------------------------------------- /src/ui/organisms/CarouselHorizontalScroll.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Carousel, HorizontalScroll } from "organism-react-carousel"; 3 | 4 | const CarouselHorizontalScrollExample = (props) => { 5 | return ( 6 | 11 | 12 | 16 | 17 | 2 18 | 3 19 | 4 20 | 5 21 | 22 | ); 23 | }; 24 | 25 | export default CarouselHorizontalScrollExample; 26 | 27 | const Styles = { 28 | carousel: { 29 | width: 300, 30 | height: 300, 31 | background: "#00558B", 32 | fontSize: "5rem", 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/ui/organisms/Checkbox.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | 3 | import { Form } from "react-atomic-molecule"; 4 | import { Checkbox } from "react-atomic-organism"; 5 | 6 | class CheckboxExample extends PureComponent { 7 | render() { 8 | return ( 9 |
10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | export default CheckboxExample; 20 | -------------------------------------------------------------------------------- /src/ui/organisms/CodeEditor.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { openCodeEditor } from "organism-react-codeeditor"; 4 | 5 | const CodeEditorExample = (props) => { 6 | return ; 7 | }; 8 | 9 | export default CodeEditorExample; 10 | -------------------------------------------------------------------------------- /src/ui/organisms/CodeExample.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | /** 4 | * Production please use 5 | * import CodeExample from 'organism-react-code' 6 | */ 7 | import CodeExample from "organism-react-code"; 8 | 9 | /** 10 | * Your source code. 11 | * npm i raw-loader 12 | */ 13 | import code from "../../../../../src/ui/organisms/CodeExample.example.jsx?raw"; 14 | 15 | const CodeExampleExample = (props) => ( 16 | 22 |
Test Demo Area
23 | 24 | ); 25 | 26 | export default CodeExampleExample; 27 | -------------------------------------------------------------------------------- /src/ui/organisms/CommandPalette.example.jsx: -------------------------------------------------------------------------------- 1 | import { CommandPalette, switchPage, clipboardCopy, openLink } from "organism-react-select-filter"; 2 | import Link from "ricon/Link"; 3 | import Email from "ricon/Email"; 4 | import Code from "ricon/Code"; 5 | import Home from "ricon/Home"; 6 | import Account from "ricon/Account"; 7 | import Edit from "ricon/Edit"; 8 | import Lightbulb from "ricon/Lightbulb"; 9 | 10 | const commands = [ 11 | { 12 | label: "Copy Link", 13 | header: "General", 14 | icon: Link, 15 | command: () => { 16 | clipboardCopy(document.URL); 17 | } 18 | }, 19 | { 20 | label: "Send Email", 21 | header: "General", 22 | icon: Email, 23 | }, 24 | { 25 | label: "View Source", 26 | header: "General", 27 | icon: Code, 28 | command: () => { 29 | openLink("https://github.com/react-atomic/react-atomic-ui", true); 30 | } 31 | }, 32 | { 33 | label: "Home", 34 | header: "Go To", 35 | icon: Home, 36 | command: () => { 37 | switchPage("#/Atoms"); 38 | } 39 | }, 40 | { 41 | label: "About", 42 | header: "Go To", 43 | icon: Account, 44 | }, 45 | { 46 | label: "Articles", 47 | header: "Go To", 48 | icon: Edit, 49 | }, 50 | { 51 | label: "Projects", 52 | header: "Go To", 53 | icon: Lightbulb, 54 | }, 55 | ]; 56 | 57 | const CommandPaletteExample = () => 58 | console.log({ item }, "default change")} 62 | onlyCommand 63 | /> 64 | 65 | export default CommandPaletteExample; 66 | -------------------------------------------------------------------------------- /src/ui/organisms/ConstraintForm.example.jsx: -------------------------------------------------------------------------------- 1 | import { ConstraintForm, ConstraintField } from "react-atomic-organism"; 2 | import { Button } from "react-atomic-molecule"; 3 | 4 | const ConstraintFormExample = () => { 5 | let form; 6 | return ( 7 | (form = el)} 9 | onSubmit={(e) => { 10 | alert("Make a submit."); 11 | return false; 12 | }} 13 | > 14 | 21 | { 27 | if (!el.value.length) { 28 | setState("you need provide content"); 29 | return false; 30 | } 31 | }} 32 | /> 33 | 34 | 42 | 43 | ); 44 | }; 45 | 46 | export default ConstraintFormExample; 47 | -------------------------------------------------------------------------------- /src/ui/organisms/D3AreaChart.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AreaChart } from "organism-react-d3-axis-chart"; 3 | 4 | const data = [ 5 | { 6 | values: [ 7 | { 8 | x: "2019-01", 9 | y: 100, 10 | }, 11 | { 12 | x: "2019-02", 13 | y: 450, 14 | }, 15 | { 16 | x: "2019-03", 17 | y: 450, 18 | }, 19 | { 20 | x: "2019-04", 21 | y: 0, 22 | }, 23 | { 24 | x: "2019-05", 25 | y: 0, 26 | }, 27 | ], 28 | }, 29 | ]; 30 | 31 | const D3AreaChart = (props) => { 32 | return ; 33 | }; 34 | 35 | export default D3AreaChart; 36 | -------------------------------------------------------------------------------- /src/ui/organisms/D3BarChart.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BarChart } from "organism-react-d3-axis-chart"; 3 | 4 | const D3BarChart = (props) => { 5 | let data = [ 6 | { 7 | values: [ 8 | { 9 | x: "2013-01", 10 | y: 53, 11 | }, 12 | { 13 | x: "2013-02", 14 | y: 165, 15 | }, 16 | { 17 | x: "2013-03", 18 | y: 269, 19 | }, 20 | ], 21 | }, 22 | ]; 23 | 24 | return ; 25 | }; 26 | 27 | export default D3BarChart; 28 | -------------------------------------------------------------------------------- /src/ui/organisms/D3LineChart.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LineChart } from "organism-react-d3-axis-chart"; 3 | 4 | const D3LineChart = (props) => { 5 | let data = [ 6 | { 7 | values: [ 8 | { 9 | x: "2013-01", 10 | y: 100, 11 | }, 12 | { 13 | x: "2013-02", 14 | y: 450, 15 | }, 16 | { 17 | x: "2013-01", 18 | y: 450, 19 | }, 20 | ], 21 | }, 22 | ]; 23 | return ( 24 | 30 | ); 31 | }; 32 | 33 | export default D3LineChart; 34 | -------------------------------------------------------------------------------- /src/ui/organisms/D3PieChart.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PieChart from "organism-react-d3-piechart"; 3 | 4 | const D3PieChartExample = (props) => { 5 | let data = [ 6 | { value: 10, label: "xxx" }, 7 | { value: 30, label: "yyy" }, 8 | ]; 9 | return ; 10 | }; 11 | 12 | export default D3PieChartExample; 13 | -------------------------------------------------------------------------------- /src/ui/organisms/D3Uml.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from "react"; 2 | 3 | import { UMLGraph } from "organism-react-d3-uml"; 4 | import { Form, Field, Button } from "react-atomic-molecule"; 5 | import { Checkbox } from "react-atomic-organism"; 6 | 7 | const data = { 8 | tables: [ 9 | { 10 | name: "table1", 11 | cols: ["t1-col1", "t1-col2"], 12 | }, 13 | { 14 | name: "table2", 15 | cols: ["t2-col1", "t2-col2"], 16 | }, 17 | ], 18 | conns: [ 19 | { 20 | from: { 21 | table: "table1", 22 | col: "t1-col1", 23 | }, 24 | to: { 25 | table: "table2", 26 | col: "t2-col2", 27 | }, 28 | }, 29 | ], 30 | }; 31 | 32 | const D3UmlExample = () => { 33 | const uml = useRef(); 34 | const [isDisableCurve, setIsDisableCurve] = useState(false); 35 | const handleUml = (el) => (uml.current = el); 36 | const handleUpdate = (e) => { 37 | const t = e.currentTarget || {}; 38 | const fm = t.form; 39 | uml.current.zoom.setXYK({ 40 | x: fm.x.value || null, 41 | y: fm.y.value || null, 42 | k: fm.k.value || null, 43 | }); 44 | }; 45 | const handleZoom = (e) => { 46 | // console.log(e.zoom.getXYK()); 47 | }; 48 | let isDisableDel; 49 | let isDisableMove; 50 | return ( 51 | <> 52 | d.conns} 58 | connFromBoxGroupLocator={(d) => d.from.table} 59 | connFromBoxLocator={(d) => d.from.col} 60 | connToBoxGroupLocator={(d) => d.to.table} 61 | connToBoxLocator={(d) => d.to.col} 62 | onBoxWillDrag={(e) => { 63 | return !isDisableMove.getChecked().input; 64 | }} 65 | onLineDel={(e) => { 66 | console.log({ e }); 67 | return !isDisableDel.getChecked().input; 68 | }} 69 | /> 70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | { 81 | setIsDisableCurve(checked); 82 | }} 83 | /> 84 | (isDisableDel = el)} 87 | /> 88 | (isDisableMove = el)} 91 | /> 92 | 93 | 94 | 95 | 96 | ); 97 | }; 98 | 99 | export default D3UmlExample; 100 | -------------------------------------------------------------------------------- /src/ui/organisms/D3UmlPerf.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from "react"; 2 | 3 | import { UMLGraph } from "organism-react-d3-uml"; 4 | import { Form, Field, Button } from "react-atomic-molecule"; 5 | import { Checkbox } from "react-atomic-organism"; 6 | 7 | const data = { 8 | tables: [], 9 | conns: [ 10 | { 11 | from: { 12 | table: "table1", 13 | col: "t1-col1", 14 | }, 15 | to: { 16 | table: "table2", 17 | col: "t2-col2", 18 | }, 19 | }, 20 | ], 21 | }; 22 | 23 | for (let i = 1; i < 999; i++) { 24 | data.tables.push({ 25 | name: `table${i}`, 26 | cols: [`t${i}-col1`, `t${i}-col2`], 27 | }); 28 | } 29 | 30 | const D3UmlPerfExample = () => { 31 | const uml = useRef(); 32 | const [isDisableCurve, setIsDisableCurve] = useState(false); 33 | const handleUml = (el) => (uml.current = el); 34 | const handleUpdate = (e) => { 35 | const t = e.currentTarget || {}; 36 | const fm = t.form; 37 | uml.current.zoom.setXYK({ 38 | x: fm.x.value || null, 39 | y: fm.y.value || null, 40 | k: fm.k.value || null, 41 | }); 42 | }; 43 | const handleZoom = (e) => { 44 | // console.log(e.zoom.getXYK()); 45 | }; 46 | let isDisableDel; 47 | let isDisableMove; 48 | return ( 49 | <> 50 | d.conns} 57 | connFromBoxGroupLocator={(d) => d.from.table} 58 | connFromBoxLocator={(d) => d.from.col} 59 | connToBoxGroupLocator={(d) => d.to.table} 60 | connToBoxLocator={(d) => d.to.col} 61 | onBoxWillDrag={(e) => { 62 | return !isDisableMove.getChecked().input; 63 | }} 64 | onLineDel={(e) => { 65 | console.log({ e }); 66 | return !isDisableDel.getChecked().input; 67 | }} 68 | /> 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | { 80 | setIsDisableCurve(checked); 81 | }} 82 | /> 83 | (isDisableDel = el)} 86 | /> 87 | (isDisableMove = el)} 90 | /> 91 | 92 | 93 | 94 | 95 | ); 96 | }; 97 | 98 | export default D3UmlPerfExample; 99 | -------------------------------------------------------------------------------- /src/ui/organisms/Dropzone.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | import Dropzone from "organism-react-dropzone"; 3 | import get from "get-object-value"; 4 | 5 | class DropzoneExample extends PureComponent { 6 | state = { 7 | urls: [], 8 | }; 9 | 10 | handleClick = () => { 11 | this.dropzone.openDialog(); 12 | }; 13 | 14 | render() { 15 | const { urls } = this.state; 16 | return ( 17 |
18 | (this.dropzone = el)} 20 | acceptedFiles=".png, .jpg" 21 | showFiletypeIcon={true} 22 | postUrl="https://file.io" 23 | djsConfig={{ 24 | addRemoveLinks: true, 25 | }} 26 | eventHandlers={{ 27 | success: (file) => { 28 | this.setState(({ urls }) => { 29 | const req = get(file, ["xhr", "response"]); 30 | if (req) { 31 | const json = JSON.parse(req); 32 | urls.push(json.link); 33 | } 34 | return urls; 35 | }); 36 | }, 37 | }} 38 | /> 39 | 48 | 49 |
50 | ); 51 | } 52 | } 53 | 54 | export default DropzoneExample; 55 | -------------------------------------------------------------------------------- /src/ui/organisms/ErrorForm.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { SemanticUI, Form, Field, Menu, Item } from "react-atomic-molecule"; 3 | 4 | import { Dropdown, SelectField } from "organism-react-navigation"; 5 | import { Checkbox } from "react-atomic-organism"; 6 | 7 | const options = [ 8 | { 9 | label: "Boy", 10 | value: "boy", 11 | }, 12 | { 13 | label: "Girl", 14 | value: "girl", 15 | }, 16 | ]; 17 | 18 | const DropdownExample = (props) => { 19 | const [value, setValue] = useState(); 20 | 21 | const MyList = (props) => ( 22 | 23 | setValue("Boy")}>Boy 24 | setValue("Girl")}>Girl 25 | 26 | ); 27 | 28 | return ( 29 | }> 33 | You-select {value} 34 | 35 | } 36 | /> 37 | ); 38 | }; 39 | 40 | const ErrorFormExample = () => { 41 | const [isError, setIsError] = useState(false); 42 | 43 | const handleChange = (e) => { 44 | setIsError(e.checked ? true : false); 45 | }; 46 | 47 | return ( 48 | 49 |
50 | 54 | 60 | 61 | 62 | 63 | 64 |
65 | ); 66 | }; 67 | 68 | export default ErrorFormExample; 69 | 70 | const Styles = { 71 | dropdown: { 72 | marginLeft: 10, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /src/ui/organisms/FBLike.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FBLike } from "organism-react-facebook"; 3 | 4 | const FBLikeExample = (props) => ( 5 | 6 | ); 7 | 8 | export default FBLikeExample; 9 | -------------------------------------------------------------------------------- /src/ui/organisms/FBPage.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FBPage } from "organism-react-facebook"; 3 | 4 | const FBPageExample = (props) => { 5 | return ; 6 | }; 7 | 8 | export default FBPageExample; 9 | -------------------------------------------------------------------------------- /src/ui/organisms/FixedDataTableList.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { lazy } from "react"; 2 | 3 | import { Cell, Column } from "pmvc_react_list"; 4 | const Table = lazy(() => import("pmvc_react_list/fixedDataTable")); 5 | 6 | const rows = [ 7 | ["a1", "b1", "c1"], 8 | ["a2", "b2", "c2"], 9 | ["a3", "b3", "c3"], 10 | ["a4", "b4", "c4"], 11 | ["a5", "b5", "c5"], 12 | ["a6", "b6", "c6"], 13 | ]; 14 | 15 | const FixedDataTableListExample = (props) => ( 16 |
17 | 150} height={150}> 18 | h1} 20 | cell={({ rowIndex, columnKey: columnIndex }) => { 21 | return rows[rowIndex][columnIndex]; 22 | }} 23 | /> 24 | h2} 26 | cell={({ rowIndex, columnKey: columnIndex }) => { 27 | return rows[rowIndex][columnIndex]; 28 | }} 29 | /> 30 | h3} 32 | cell={({ rowIndex, columnKey: columnIndex }) => { 33 | return rows[rowIndex][columnIndex]; 34 | }} 35 | /> 36 |
37 |
38 | ); 39 | 40 | export default FixedDataTableListExample; 41 | -------------------------------------------------------------------------------- /src/ui/organisms/FullScreen.example.jsx: -------------------------------------------------------------------------------- 1 | import get from "get-object-value"; 2 | 3 | import { 4 | FullScreenExample as FullScreen, 5 | FullScreenUrl, 6 | } from "organism-react-code"; 7 | 8 | const FullScreenExample = () => ( 9 | <> 10 |

11 | 12 | test 13 | 14 |

15 |

16 | 21 | <> 22 |

test1--->Start

23 |

test

24 |

test

25 |

test

26 |

test

27 |

test

28 |

test

29 |

test

30 |

test

31 |

test

32 |

test

33 |

test

34 |

test

35 |

test

36 |

test

37 |

test

38 |

test

39 |

test

40 |

test

41 |

test

42 |

test

43 |

test

44 |

test

45 |

test

46 |

test

47 |

test

48 |

test

49 |

test

50 |

test

51 |

test

52 |

test

53 |

test

54 |

test

55 |

test

56 |

test

57 |

test

58 |

test

59 |

test

60 |

test

61 |

test

62 |

test2--->End

63 | 64 | 65 |

66 |

67 | 71 | test with url 72 | 73 |

74 | 75 | ); 76 | 77 | export default FullScreenExample; 78 | -------------------------------------------------------------------------------- /src/ui/organisms/GrapesJs.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GrapesJsController } from "organism-react-grapesjs"; 3 | 4 | const GrapesJsExample = () => ( 5 | 6 | ); 7 | 8 | export default GrapesJsExample; 9 | 10 | const Styles = { 11 | container: { 12 | minHeight: 600, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/ui/organisms/GridList.example.jsx: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | const Grid = lazy(() => import("pmvc_react_list/grid")); 3 | 4 | const rows = [ 5 | ["a1", "b1", "c1"], 6 | ["a2", "b2", "c2"], 7 | ["a3", "b3", "c3"], 8 | ["a4", "b4", "c4"], 9 | ["a5", "b5", "c5"], 10 | ["a6", "b6", "c6"], 11 | ]; 12 | 13 | const GridListExample = (props) => { 14 | const className = "grid"; // hack for disable const element 15 | return ( 16 | 23 | ); 24 | }; 25 | 26 | export default GridListExample; 27 | 28 | const Styles = { 29 | container: { 30 | border: "1px solid #000", 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/ui/organisms/HTMLToCanvans.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import { Unsafe, Field, Form, Button } from "react-atomic-molecule"; 3 | 4 | import { HTMLToPDF } from "organism-react-html2canvas"; 5 | 6 | const HTMLToCanvansExample = (props) => { 7 | const [html, setHtml] = useState(""); 8 | 9 | const pdf = useRef(); 10 | 11 | const handleInput = (e) => { 12 | const v = e.currentTarget.value; 13 | setHtml(v); 14 | }; 15 | 16 | const handleClick = (e) => { 17 | if (pdf && pdf.current) { 18 | pdf.current.download(); 19 | } 20 | }; 21 | 22 | const handlePdf = (el) => (pdf.current = el); 23 | return ( 24 |
25 |
26 | 27 | 28 | 29 | 30 | {html} 31 | 32 |
33 | ); 34 | }; 35 | 36 | export default HTMLToCanvansExample; 37 | -------------------------------------------------------------------------------- /src/ui/organisms/HtmlTableList.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | 3 | import { Table, Cell, Column } from "pmvc_react_list"; 4 | 5 | const rows = [ 6 | ["a1", "b1", "c1"], 7 | ["a2", "b2", "c2"], 8 | ["a3", "b3", "c3"], 9 | ["a1", "b1", "c1"], 10 | ["a2", "b2", "c2"], 11 | ["a3", "b3", "c3"], 12 | ]; 13 | 14 | class HtmlTableListExample extends PureComponent { 15 | render() { 16 | return ( 17 | 18 | h1} 20 | cell={({ rowIndex, columnIndex }) => { 21 | return rows[rowIndex][columnIndex]; 22 | }} 23 | /> 24 | h2} 26 | cell={({ rowIndex, columnIndex }) => { 27 | return rows[rowIndex][columnIndex]; 28 | }} 29 | /> 30 | h3} 32 | cell={({ rowIndex, columnIndex }) => { 33 | return rows[rowIndex][2]; 34 | }} 35 | /> 36 |
37 | ); 38 | } 39 | } 40 | 41 | export default HtmlTableListExample; 42 | 43 | const Styles = { 44 | col: { 45 | height: 40, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/ui/organisms/PageLoadProgressHandler.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { PageLoadProgressHandler } from "organism-react-progress"; 3 | import { Button, InputBox } from "react-atomic-molecule"; 4 | 5 | const PageLoadProgressHandlerExample = (props) => { 6 | let oLoad; 7 | let dInput; 8 | return ( 9 |
10 | (oLoad = o)} /> 11 | 12 |
13 | 21 | 29 | 37 | 45 |
46 | 47 |
48 | (dInput = o)} 52 | button={"Go"} 53 | actionProps={{ 54 | onClick: () => { 55 | oLoad.start(dInput.value); 56 | }, 57 | }} 58 | style={Styles.input} 59 | /> 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default PageLoadProgressHandlerExample; 66 | 67 | const Styles = { 68 | input: { 69 | width: 20, 70 | }, 71 | button: { 72 | marginBottom: 10, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /src/ui/organisms/PageLoadProgressHandlerWithAjax.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { PageLoadProgressHandler } from "organism-react-progress"; 3 | import { ajaxDispatch } from "organism-react-ajax"; 4 | import { Button } from "react-atomic-molecule"; 5 | 6 | const PageLoadProgressHandlerExample = (props) => { 7 | let url = 8 | "https://raw.githubusercontent.com/react-atomic/react-atomic-ui/main/README.md"; 9 | return ( 10 |
11 | 12 | 13 | 28 |
29 | ); 30 | }; 31 | 32 | export default PageLoadProgressHandlerExample; 33 | -------------------------------------------------------------------------------- /src/ui/organisms/Pagination.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | 3 | import { PaginationController } from "organism-react-navigation"; 4 | 5 | class PaginationExample extends PureComponent { 6 | handlePageChange = ({ begin }) => { 7 | this.setState({ begin }); 8 | }; 9 | 10 | render() { 11 | const { begin } = this.state || {}; 12 | return ( 13 | 19 | ); 20 | } 21 | } 22 | 23 | export default PaginationExample; 24 | 25 | const Styles = { 26 | container: { 27 | textAlign: "center", 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/ui/organisms/ParallaxBackgroundImage.example.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ParallaxBackgroundImage } from "organism-react-parallax"; 3 | 4 | const ParallaxBackgroundImageExample = () => ( 5 | 9 | test 10 | 11 | ); 12 | 13 | export default ParallaxBackgroundImageExample; 14 | 15 | const Styles = { 16 | container: { 17 | height: 600, 18 | color: "#fff", 19 | textAlign: "center", 20 | paddingTop: 200, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/ui/organisms/Popup.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Checkbox } from "react-atomic-organism"; 3 | 4 | /** 5 | * Production please use 6 | * import {...xxx} from "organism-react-popup" 7 | */ 8 | import { Dialog, PopupModal, PopupClick } from "organism-react-popup"; 9 | 10 | import { Button } from "react-atomic-molecule"; 11 | 12 | const PopupExample = () => { 13 | const [backgroundScrollAble, setBackgroundScrollAble] = useState(false); 14 | return ( 15 | <> 16 |

17 | { 20 | return ( 21 | 22 | xxx 23 | 24 | ); 25 | }} 26 | component={} 27 | > 28 | show modal 29 | 30 |

31 | 32 |

33 | { 36 | return ( 37 | 38 |

xxx1--->Start

39 |

xxx

40 |

xxx

41 |

xxx

42 |

xxx

43 |

xxx

44 |

xxx

45 |

xxx

46 |

xxx2--->End

47 | 48 | ); 49 | }} 50 | component={} 51 | > 52 | show modal (long modal to test window resize) 53 | 54 |

55 | 56 |

57 | { 60 | return ( 61 | 62 |

xxx1--->Start

63 |

xxx

64 |

xxx

65 |

xxx

66 |

xxx

67 |

xxx

68 |

xxx

69 |

xxx

70 |

xxx

71 |

xxx

72 |

xxx

73 |

xxx

74 |

xxx

75 |

xxx

76 |

xxx

77 |

xxx

78 |

xxx

79 |

xxx

80 |

xxx

81 |

xxx

82 |

xxx

83 |

xxx2--->End

84 | 85 | ); 86 | }} 87 | component={} 88 | > 89 | show modal (modal element with scroll) 90 | 91 |

92 | 93 |

94 | 101 | Test Dialog 102 | 103 | } 104 | component={ 43 | 44 | 45 | ); 46 | }; 47 | 48 | export default RadioGroupExample; 49 | -------------------------------------------------------------------------------- /src/ui/organisms/ReactVirtualizedTableList.example.jsx: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | import { Cell, Column } from "pmvc_react_list"; 3 | const Table = lazy(() => import("pmvc_react_list/rv")); 4 | 5 | const rows = [ 6 | ["a1", "b1", "c1"], 7 | ["a2", "b2", "c2"], 8 | ["a3", "b3", "c3"], 9 | ["a1", "b1", "c1"], 10 | ["a2", "b2", "c2"], 11 | ["a3", "b3", "c3"], 12 | ]; 13 | 14 | const handleClick = (rowIndex) => (ev) => { 15 | alert(rowIndex); 16 | }; 17 | 18 | const ReactVirtualizedTableListExample = (props) => ( 19 |

20 | 21 | h1} 23 | cell={({ rowIndex, columnIndex, style }) => ( 24 |
25 | {rows[rowIndex][columnIndex]} 26 |
27 | )} 28 | /> 29 | h2} 31 | cell={({ rowIndex, columnIndex, style }) => ( 32 |
33 | {rows[rowIndex][columnIndex]} 34 |
35 | )} 36 | /> 37 | h3} 39 | cell={({ rowIndex, columnIndex, style }) => ( 40 |
41 | {rows[rowIndex][columnIndex]} 42 |
43 | )} 44 | /> 45 |
46 |
47 | ); 48 | 49 | export default ReactVirtualizedTableListExample; 50 | -------------------------------------------------------------------------------- /src/ui/organisms/ReshowMessage.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | 3 | import { Button } from "react-atomic-molecule"; 4 | import { dispatch, Return } from "reshow"; 5 | 6 | const DialogResult = ({ dialogReturn }) => 7 | "undefined" !== typeof dialogReturn ? "Dialog: " + dialogReturn : null; 8 | 9 | class ReshowMessageExample extends PureComponent { 10 | handleAddAlert = (e) => { 11 | dispatch("alert/add", { 12 | message: "test", 13 | }); 14 | }; 15 | 16 | handleResetAlert = (e) => { 17 | dispatch("alert/reset", { 18 | alerts: [1, 2, 3], 19 | }); 20 | }; 21 | 22 | handleCleanAlert = (e) => { 23 | dispatch("alert/reset", { 24 | alerts: null, 25 | }); 26 | }; 27 | 28 | handleOpenDialog = (e) => { 29 | dispatch("dialog/start", { 30 | dialog: "how are u", 31 | }); 32 | }; 33 | 34 | render() { 35 | return ( 36 |
37 |

38 | 39 | 40 | 41 |

42 |

43 | 44 | 45 | 46 | 47 |

48 |
49 | ); 50 | } 51 | } 52 | 53 | export default ReshowMessageExample; 54 | -------------------------------------------------------------------------------- /src/ui/organisms/SelectFilter.example.jsx: -------------------------------------------------------------------------------- 1 | import { SelectFilter } from "organism-react-select-filter"; 2 | import { useRef } from "react"; 3 | 4 | const options = [ 5 | { 6 | label: "Boy", 7 | value: "boy", 8 | }, 9 | { 10 | label: "Girl", 11 | value: "girl", 12 | }, 13 | ]; 14 | 15 | const SelectFilterExample = () => { 16 | const lastCommand = useRef(); 17 | return ( 18 | <> 19 | 23 | 24 | ); 25 | }; 26 | 27 | export default SelectFilterExample; 28 | -------------------------------------------------------------------------------- /src/ui/organisms/Spotlight.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | 3 | import { Button } from "react-atomic-molecule"; 4 | 5 | import { PopupPool } from "organism-react-popup"; 6 | 7 | import { FullScreenExample } from "organism-react-code"; 8 | 9 | import Spotlight from "organism-react-spotlight"; 10 | 11 | class SpotlightExample extends PureComponent { 12 | state = { 13 | spotlight: false, 14 | }; 15 | 16 | render() { 17 | const { spotlight } = this.state; 18 | let thisSpotlight = null; 19 | if (spotlight) { 20 | thisSpotlight = ( 21 | { 25 | this.setState({ spotlight: null }); 26 | }} 27 | /> 28 | ); 29 | } 30 | return ( 31 | this.setState({ spotlight: null })} 34 | > 35 |
(this.spot = el)} style={Styles.el}> 36 | Spotlight 37 |
38 |
39 | 48 |
49 | {thisSpotlight} 50 | 51 | 52 | ); 53 | } 54 | } 55 | 56 | export default SpotlightExample; 57 | 58 | const Styles = { 59 | el: { 60 | display: "inline-block", 61 | width: 100, 62 | height: 200, 63 | margin: 10, 64 | }, 65 | }; 66 | -------------------------------------------------------------------------------- /src/ui/organisms/StockChart.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { FullScreenExample as FullScreen } from "organism-react-code"; 3 | import { StockChartCompute } from "organism-react-stockcharts"; 4 | import { ajaxDispatch } from "organism-react-ajax"; 5 | import { useMounted } from "reshow-hooks"; 6 | 7 | const StockChartExample = (props) => { 8 | const [data, setData] = useState(); 9 | const isMount = useMounted(); 10 | useEffect(() => { 11 | ajaxDispatch({ 12 | type: "ajaxGet", 13 | params: { 14 | url: "https://raw.githubusercontent.com/react-atomic/react-atomic-ui/main/data/stock.json", 15 | callback: (json) => { 16 | if (isMount()) { 17 | setData({ trades: json }); 18 | } 19 | }, 20 | }, 21 | }); 22 | }, []); 23 | if (!data) { 24 | return null; 25 | } 26 | return ( 27 | 28 | d.trades} 31 | tradeHighLocator={(d) => d.h} 32 | tradeLowLocator={(d) => d.l} 33 | tradeOpenLocator={(d) => d.o} 34 | tradeCloseLocator={(d) => d.c} 35 | tradeVolumeLocator={(d) => d.v} 36 | tradeDateLocator={(d) => d.t} 37 | /> 38 | 39 | ); 40 | }; 41 | 42 | export default StockChartExample; 43 | -------------------------------------------------------------------------------- /src/ui/organisms/Storage.example.jsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import { InputBox } from "react-atomic-molecule"; 3 | import { useLocalStorage } from "reshow"; 4 | 5 | const StorageExample = () => { 6 | const lastEl = useRef(); 7 | const [state, storageDispatch] = useLocalStorage(["foo"]); 8 | console.log({ state }); 9 | const handleClick = () => { 10 | storageDispatch({ foo: lastEl.current.value }); 11 | }; 12 | return ( 13 | 19 | ); 20 | }; 21 | export default StorageExample; 22 | -------------------------------------------------------------------------------- /src/ui/organisms/Suggestion.example.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef, useEffect } from "react"; 2 | 3 | import { Button } from "react-atomic-molecule"; 4 | 5 | import { Suggestion } from "react-atomic-organism"; 6 | 7 | const data = ["abc", "abb", "acc"]; 8 | 9 | const SuggestionExample = () => { 10 | const [results, setResults] = useState(); 11 | const [myValue, setMyValue] = useState(); 12 | const lastSuggestion = useRef(); 13 | 14 | const handler = { 15 | itemClick: (e) => { 16 | setMyValue(e.item); 17 | }, 18 | change: (e) => { 19 | const value = e.value; 20 | setMyValue(value); 21 | if (!value.length) { 22 | setResults(data); 23 | return; 24 | } 25 | const results = []; 26 | data.forEach((v, k) => { 27 | if (value.length && -1 !== v.indexOf(value)) { 28 | results.push(v); 29 | } 30 | }); 31 | setResults(results); 32 | }, 33 | }; 34 | 35 | useEffect(() => { 36 | lastSuggestion.current.setValue(myValue); 37 | }, [myValue]); 38 | return ( 39 | <> 40 | 46 | 56 | 57 | 58 | ); 59 | }; 60 | 61 | export default SuggestionExample; 62 | -------------------------------------------------------------------------------- /src/ui/organisms/SuggestionWithoutNewItem.example.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef } from "react"; 2 | 3 | import { Button } from "react-atomic-molecule"; 4 | 5 | import { Suggestion } from "react-atomic-organism"; 6 | 7 | const data = ["abc", "abb", "acc"]; 8 | 9 | const SuggestionExample = () => ( 10 | 11 | ); 12 | 13 | export default SuggestionExample; 14 | -------------------------------------------------------------------------------- /src/ui/organisms/TabView.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import { 4 | SemanticUI, 5 | Menu, 6 | Item, 7 | InputBox, 8 | Button, 9 | } from "react-atomic-molecule"; 10 | import SearchIcon from "ricon/Search"; 11 | 12 | import { TabView, Tab } from "organism-react-navigation"; 13 | 14 | const RightMenu = () => ( 15 | 16 | 17 | } transparent placeholder="Search..." /> 18 | 19 | 20 | ); 21 | 22 | const TabViewExample = (props) => { 23 | const [selected, setSelected] = useState(); 24 | return ( 25 | 26 | }> 27 | 28 |
content1
29 |
menu1
30 | 31 | 32 |
content2
33 |
menu2
34 | 35 | 36 | 37 | 38 | 39 | ); 40 | }; 41 | 42 | export default TabViewExample; 43 | -------------------------------------------------------------------------------- /src/ui/organisms/TagHighlight.example.jsx: -------------------------------------------------------------------------------- 1 | import Highlight from "organism-react-tag-highlight"; 2 | 3 | const TagHighlightExample = props => { 4 | return If you don't *let us dream*, we *won't* let you *sleep. 5 | }; 6 | 7 | export default TagHighlightExample; 8 | -------------------------------------------------------------------------------- /src/ui/organisms/TagInput.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { TagsField } from "organism-react-tag-input"; 3 | import { Form, Field, SemanticUI } from "react-atomic-molecule"; 4 | import { Checkbox } from "react-atomic-organism"; 5 | 6 | const TagInputExample = (props) => { 7 | const [isDisable, setIsDisable] = useState(false); 8 | const [limit, setLimit] = useState(-1); 9 | const [couldDuplicate, setCouldDuplicate] = useState(); 10 | 11 | const handleDisable = (e) => { 12 | setIsDisable(e.checked ? true : false); 13 | }; 14 | const handleCouldDuplicate= (e) => { 15 | setCouldDuplicate(e.checked ? true : false); 16 | }; 17 | 18 | return ( 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {setLimit(e.currentTarget.value)}} min="-1"/> 28 | 29 | ); 30 | }; 31 | 32 | export default TagInputExample; 33 | -------------------------------------------------------------------------------- /src/ui/organisms/TomatoApp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState, useEffect, useMemo } from "react"; 2 | import { 3 | mixClass, 4 | useLazyInject, 5 | reactStyle, 6 | SemanticUI, 7 | Button, 8 | Segment, 9 | Row, 10 | Column, 11 | List, 12 | Item, 13 | InputBox, 14 | } from "react-atomic-molecule"; 15 | import { ProgressBar } from "organism-react-progress"; 16 | import { percent } from "to-percent-js"; 17 | import { Return } from "reshow"; 18 | import { popupDispatch, PopupModal, PopupClick } from "organism-react-popup"; 19 | import { getTimestamp } from "get-random-id"; 20 | import get from "get-object-value"; 21 | 22 | const POMODORO = "POMODORO"; 23 | const SHORT_BREAK = "SHORT_BREAK"; 24 | const LONG_BREAK = "LONG_BREAK"; 25 | const keys = Object.keys; 26 | 27 | const secToMin = (sec) => { 28 | const min = Math.floor(sec / 60); 29 | const remainSec = sec % 60; 30 | return `${min}:${10 > remainSec ? "0" + remainSec : remainSec}`; 31 | }; 32 | 33 | const Tip = () => ( 34 | 35 | {({ pomodoro }) => { 36 | if (!pomodoro) { 37 | return null; 38 | } 39 | return ( 40 | 41 | {pomodoro.tip.map((item, key) => ( 42 | {item} 43 | ))} 44 | 45 | ); 46 | }} 47 | 48 | ); 49 | 50 | const ActionSegment = ({ col1, col2, ...props }) => { 51 | return ( 52 | 53 | 54 | {col1} 55 | 56 | 57 | ); 58 | }; 59 | 60 | const useTomato = (countdown) => { 61 | const TotalMin = useRef(25); 62 | const TotalSec = TotalMin.current * 60; 63 | const [state, setState] = useState({ activeType: POMODORO, sec: TotalSec }); 64 | const { sec, preview, active, activeType } = state; 65 | const timer = useRef(); 66 | const modal = useRef(); 67 | const resetInput = useRef(); 68 | const lastActive = useRef(); 69 | const resetState = useRef(); 70 | 71 | useEffect( 72 | () => () => { 73 | handler.stop(); 74 | }, 75 | [] 76 | ); 77 | 78 | useEffect(() => { 79 | const now = getTimestamp(); 80 | lastActive.current = { active, activeType, now, sec }; 81 | }, [active, activeType, sec]); 82 | 83 | const updateClock = (setToMinute, totalSec, more) => { 84 | if (setToMinute) { 85 | totalSec = totalSec ?? setToMinute * 60; 86 | setState((prev) => ({ ...prev, ...more, sec: totalSec })); 87 | TotalMin.current = setToMinute; 88 | } 89 | }; 90 | 91 | const updateAndRestore = (countdownKey, nextMinute, more) => { 92 | const activeType = resetState.current?.activeType; 93 | if (countdownKey && activeType === countdownKey) { 94 | if (resetState.current.sec) { 95 | updateClock(nextMinute, resetState.current.sec, more); 96 | } else { 97 | updateClock(nextMinute, null, more); 98 | } 99 | } else { 100 | updateClock(nextMinute, null, more); 101 | } 102 | }; 103 | 104 | const handler = { 105 | btnMouseIn: (e) => { 106 | if (lastActive.current?.active) { 107 | return; 108 | } 109 | if (!resetState.current) { 110 | resetState.current = { ...lastActive.current }; 111 | } 112 | const id = e?.currentTarget?.id; 113 | const setToMinute = countdown[id]?.minute; 114 | updateAndRestore(id, setToMinute, { activeType: id, preview: true }); 115 | }, 116 | btnMouseOut: (e) => { 117 | if (lastActive.current?.active) { 118 | return; 119 | } 120 | const target = e.currentTarget; 121 | const id = e?.currentTarget?.id; 122 | const origActiveType = resetState.current.activeType; 123 | if (origActiveType) { 124 | updateAndRestore(origActiveType, countdown[origActiveType].minute, { 125 | activeType: origActiveType, 126 | preview: false, 127 | }); 128 | } else { 129 | setState((prev) => ({ 130 | ...prev, 131 | activeType: origActiveType, 132 | preview: false, 133 | })); 134 | } 135 | }, 136 | clickProgress: () => { 137 | if (lastActive.current) { 138 | if (lastActive.current.active) { 139 | handler.stop(); 140 | } else { 141 | const countdownKey = lastActive.current.activeType; 142 | if (countdownKey) { 143 | handler.start({ countdownKey })(); 144 | } 145 | } 146 | } 147 | }, 148 | start: 149 | ({ countdownKey, getModal } = {}) => 150 | (e) => { 151 | countdownKey = e?.currentTarget.id || countdownKey; 152 | const setToMinute = countdown[countdownKey]?.minute; 153 | if (!timer.current) { 154 | lastActive.current = null; 155 | updateAndRestore(countdownKey, setToMinute, { 156 | active: true, 157 | activeType: countdownKey, 158 | }); 159 | setTimeout(() => { 160 | resetState.current = { ...lastActive.current }; 161 | timer.current = setInterval(() => { 162 | setState(({ sec, ...prev }) => { 163 | const lastTime = get(lastActive.current, ["now"]); 164 | if (lastTime) { 165 | const now = getTimestamp(); 166 | const queue = now - lastTime; 167 | if (queue > 1000) { 168 | const queueSec = Math.floor(queue / 1000); 169 | sec -= queueSec; 170 | } 171 | } 172 | if (sec <= 0 || isNaN(sec)) { 173 | handler.stop(); 174 | sec = 0; 175 | } 176 | return { ...prev, sec }; 177 | }); 178 | }, 100); 179 | }, 200); 180 | } else { 181 | console.warn("Timer already running"); 182 | if (getModal) { 183 | popupDispatch("dom/update", { 184 | popup: getModal(setToMinute), 185 | }); 186 | } 187 | } 188 | }, 189 | stop: () => { 190 | resetState.current = { ...lastActive.current }; 191 | if (modal.current) { 192 | modal.current.close(); 193 | } 194 | if (timer.current) { 195 | clearInterval(timer.current); 196 | timer.current = null; 197 | } 198 | setState((prev) => ({ ...prev, active: false, preview: false })); 199 | }, 200 | reset: () => { 201 | lastActive.current = null; 202 | handler.stop(); 203 | updateClock(resetInput.current.value); 204 | }, 205 | }; 206 | 207 | return { 208 | sec, 209 | active, 210 | preview, 211 | activeType, 212 | TotalSec, 213 | handler, 214 | modal, 215 | resetInput, 216 | }; 217 | }; 218 | 219 | const TomatoApp = (props) => { 220 | const { countdown, useTomato } = props; 221 | injects = useLazyInject(InjectStyles, injects); 222 | 223 | const { 224 | sec, 225 | active, 226 | preview, 227 | activeType, 228 | handler, 229 | modal, 230 | resetInput, 231 | TotalSec, 232 | } = useTomato(countdown); 233 | 234 | const getModal = (defaultValue) => { 235 | return ( 236 | 237 | 240 | 254 | 255 | ); 256 | }; 257 | 258 | return ( 259 | 260 | {useMemo(() => { 261 | const percentNum = percent(sec / TotalSec); 262 | const classes = mixClass("big Pomodoro", { 263 | [countdown[activeType]?.colorName]: active || preview, 264 | }); 265 | const barLabelProps = {}; 266 | if (percentNum > 50) { 267 | barLabelProps.styles = reactStyle( 268 | { transform: `translate(${100 - percentNum}%, 0)` }, 269 | false, 270 | false 271 | ); 272 | } 273 | return ( 274 | 282 | ); 283 | }, [sec, active, preview])} 284 | 287 | {keys(countdown).map((key) => { 288 | const count = countdown[key]; 289 | let thisClass = null; 290 | if (key === activeType) { 291 | thisClass = count.colorName; 292 | } else { 293 | if (active) { 294 | return null; 295 | } 296 | } 297 | const handleStart = handler.start({ getModal }); 298 | return ( 299 | 309 | ); 310 | })} 311 | 312 | } 313 | /> 314 | 315 | 316 | ); 317 | }; 318 | 319 | TomatoApp.defaultProps = { 320 | countdown: { 321 | POMODORO: { 322 | minute: 25, 323 | label: "Pomodoro", 324 | colorName: "red", 325 | }, 326 | SHORT_BREAK: { 327 | minute: 5, 328 | label: "Short Break", 329 | colorName: "teal", 330 | }, 331 | LONG_BREAK: { 332 | minute: 15, 333 | label: "Long Break", 334 | colorName: "blue", 335 | }, 336 | }, 337 | useTomato, 338 | }; 339 | 340 | export default TomatoApp; 341 | 342 | const Styles = { 343 | progress: { 344 | cursor: "pointer", 345 | }, 346 | buttonList: { 347 | textAlign: "center", 348 | }, 349 | resetInput: { 350 | marginLeft: 20, 351 | }, 352 | reset: { 353 | width: 20, 354 | }, 355 | }; 356 | 357 | let injects; 358 | const InjectStyles = { 359 | bar: [ 360 | { 361 | overflow: "inherit", 362 | }, 363 | ".ui.progress.Pomodoro .bar", 364 | ], 365 | barLabel: [ 366 | { 367 | fontSize: "7rem", 368 | }, 369 | ".ui.progress.Pomodoro .bar>.progress", 370 | ], 371 | }; 372 | -------------------------------------------------------------------------------- /src/ui/organisms/TomatoSortable.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef } from "react"; 2 | import { DDWrapper } from "organism-react-graph"; 3 | import query from "css-query-selector"; 4 | import { 5 | build, 6 | getChildMapping, 7 | SemanticUI, 8 | Item, 9 | } from "react-atomic-molecule"; 10 | import { nearWhere } from "get-window-offset"; 11 | import { KEYS } from "reshow-constant"; 12 | 13 | const useSortable = ({ setSortElement, fixedX, fixedY }) => { 14 | const [isDraging, setIsDraging] = useState(); 15 | const comp = useRef(); 16 | 17 | const handleSortElement = (targetEl, pointXY) => { 18 | const near = nearWhere(targetEl, pointXY); 19 | const sortEl = comp.current; 20 | const nextId = targetEl.nextSibling?.getAttribute("name"); 21 | const prevId = targetEl.previousSibling?.getAttribute("name"); 22 | const sortId = sortEl?.getAttribute("name"); 23 | 24 | let reverse; 25 | if (targetEl.getAttribute("data-first")) { 26 | reverse = false; 27 | } else if (targetEl.getAttribute("data-last")) { 28 | reverse = near.top ? false : true; 29 | } else { 30 | reverse = (nextId === sortId || prevId === sortId) && near.top; 31 | } 32 | 33 | setSortElement({ 34 | targetEl, 35 | targetId: targetEl.getAttribute("name"), 36 | sortEl, 37 | sortId, 38 | reverse, 39 | }); 40 | }; 41 | 42 | const handleSortTarget = (pointerTarget) => { 43 | if (!pointerTarget) { 44 | return false; 45 | } 46 | const type = pointerTarget.getAttribute("data-type"); 47 | if (!type) { 48 | const sortTarget = query.ancestor( 49 | pointerTarget, 50 | '[data-type="sortable"]' 51 | ); 52 | if (sortTarget) { 53 | return sortTarget; 54 | } 55 | } else { 56 | if ("sortable" === type) { 57 | return pointerTarget; 58 | } 59 | } 60 | }; 61 | 62 | const handler = { 63 | drag: (e) => { 64 | if (!comp.current) { 65 | return; 66 | } 67 | setIsDraging(true); 68 | const { getPointerTarget, getClientPointerTarget, getAllPointer } = e; 69 | let pointerTarget; 70 | if (fixedX) { 71 | pointerTarget = getClientPointerTarget({ x: e.start.offset.x }); 72 | } else if (fixedY) { 73 | pointerTarget = getClientPointerTarget({ y: e.start.offset.y }); 74 | } else { 75 | pointerTarget = getPointerTarget(); 76 | } 77 | 78 | if (!pointerTarget) { 79 | return; 80 | } 81 | 82 | let sortTarget = handleSortTarget(pointerTarget); 83 | if (!sortTarget) { 84 | const allPointer = getAllPointer(); 85 | ["tr", "br", "bl"].some((key) => { 86 | pointerTarget = getPointerTarget(allPointer[key]); 87 | sortTarget = handleSortTarget(pointerTarget); 88 | if (sortTarget) { 89 | return true; 90 | } else { 91 | return false; 92 | } 93 | }); 94 | } 95 | if (sortTarget) { 96 | const pointXY = { 97 | x: pointerTarget.pointXY[0], 98 | y: pointerTarget.pointXY[1], 99 | }; 100 | handleSortElement(sortTarget, pointXY); 101 | } 102 | }, 103 | dragEnd: (e) => { 104 | setIsDraging(false); 105 | }, 106 | }; 107 | return { isDraging, handler, comp }; 108 | }; 109 | 110 | const Sort = (props) => { 111 | const { handler, isDraging, comp } = useSortable(props); 112 | const { children, setSortElement, style: propsStyle, ...otherProps } = props; 113 | 114 | const mergeStyle = (style) => { 115 | return { 116 | ...propsStyle, 117 | ...children.props?.style, 118 | ...style, 119 | }; 120 | }; 121 | 122 | const item = build( 123 | build(children)({ 124 | ...otherProps, 125 | "data-type": "sortable", 126 | }) 127 | ); 128 | 129 | const activeStyle = isDraging ? Styles.active : null; 130 | 131 | const shadowEl = isDraging ? item({ style: mergeStyle(activeStyle) }) : null; 132 | const dragEl = item({ 133 | style: mergeStyle(), 134 | refCb: (el) => (comp.current = el), 135 | }); 136 | 137 | return ( 138 | <> 139 | 140 | {dragEl} 141 | 142 | {shadowEl} 143 | 144 | ); 145 | }; 146 | 147 | const useSortList = ({ children }) => { 148 | const [{ sortId, targetId, reverse }, setSortElement] = useState({}); 149 | const lastSortOrder = useRef(); 150 | const sortOrder = []; 151 | let bFirst; 152 | const sortOrderPush = (item) => { 153 | if (!bFirst) { 154 | bFirst = true; 155 | sortOrder.push(build(item)({ "data-first": true })); 156 | } else { 157 | sortOrder.push(item); 158 | } 159 | }; 160 | 161 | const childList = getChildMapping(children, (child, key) => ( 162 | 163 | {child} 164 | 165 | )); 166 | if (!lastSortOrder.current) { 167 | lastSortOrder.current = KEYS(childList).map((key) => childList[key]); 168 | } 169 | lastSortOrder.current.forEach((item) => { 170 | const key = item.props.name; 171 | if (sortId === key) { 172 | if (sortId === targetId) { 173 | sortOrder.push(childList[key]); 174 | } 175 | } else if (targetId === key) { 176 | if (reverse) { 177 | sortOrderPush(childList[key]); 178 | sortOrderPush(childList[sortId]); 179 | } else { 180 | sortOrderPush(childList[sortId]); 181 | sortOrderPush(childList[key]); 182 | } 183 | } else { 184 | sortOrderPush(childList[key]); 185 | } 186 | }); 187 | const lastIndex = sortOrder.length - 1; 188 | sortOrder[lastIndex] = build(sortOrder[lastIndex])({ "data-last": true }); 189 | lastSortOrder.current = sortOrder; 190 | return { sortOrder, setSortElement }; 191 | }; 192 | 193 | const SortList = (props) => { 194 | const { sortOrder } = useSortList(props); 195 | return {sortOrder}; 196 | }; 197 | 198 | const Sortable = (props) => ( 199 | 200 | list 1 201 | list 2 202 | list 3 203 | list 4 204 | list 5 205 | 206 | ); 207 | 208 | export default Sortable; 209 | 210 | const Styles = { 211 | move: { 212 | position: "absolute", 213 | pointerEvents: "none", 214 | }, 215 | active: { 216 | border: "2px dashed rgba(0, 0, 0, 0.2)", 217 | }, 218 | itemList: { 219 | margin: "0 auto", 220 | width: 100, 221 | }, 222 | item: { 223 | width: 100, 224 | height: 50, 225 | border: "1px solid rgba(0, 0, 0, 0.5)", 226 | }, 227 | }; 228 | -------------------------------------------------------------------------------- /src/ui/organisms/WindowOffset.example.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { PopupHover, PopupOverlay } from "organism-react-popup"; 3 | 4 | class WindowOffsetExample extends Component { 5 | handleClick = (e) => { 6 | const target = e.currentTarget; 7 | import("get-window-offset").then(({ default: getWindowOffset }) => { 8 | const info = getWindowOffset(target); 9 | console.log(info); 10 | }); 11 | }; 12 | 13 | render() { 14 | return ( 15 |
16 |
17 | 18 |
22 | 1 23 |
24 | 25 | 26 |
30 | 2 31 |
32 | 33 | 34 |
38 | 3 39 |
40 | 41 |
42 |
43 | 44 |
48 | 4 49 |
50 | 51 | 52 |
56 | 5 57 |
58 | 59 | 60 |
64 | 6 65 |
66 | 67 |
68 |
69 | 70 |
74 | 7 75 |
76 | 77 | 78 |
82 | 8 83 |
84 | 85 | 86 |
90 | 9 91 |
92 | 93 |
94 |
95 | ); 96 | } 97 | } 98 | 99 | export default WindowOffsetExample; 100 | 101 | const Styles = { 102 | row: { 103 | justifyContent: "space-around", 104 | display: "flex", 105 | marginBottom: 100, 106 | }, 107 | col: { 108 | width: 60, 109 | height: 60, 110 | lineHeight: "60px", 111 | textAlign: "center", 112 | color: "#fff", 113 | }, 114 | col1: { 115 | background: "#c00", 116 | }, 117 | col2: { 118 | background: "#095", 119 | }, 120 | col3: { 121 | background: "#059", 122 | }, 123 | }; 124 | -------------------------------------------------------------------------------- /src/ui/organisms/YouTubeRWD.example.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { YoutubeRWD } from "organism-react-video"; 3 | import { Checkbox } from "react-atomic-organism"; 4 | 5 | const YouTubeRWDExample = () => { 6 | const [controls, setControls] = useState(); 7 | const handleControls = (e) => setControls(e.checked ? 1 : 0); 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default YouTubeRWDExample; 17 | -------------------------------------------------------------------------------- /src/ui/pages/Animation.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | /*Sample*/ 6 | import AnimationExample from "../organisms/Animation.example"; 7 | import animationExample from "../../../../../src/ui/organisms/Animation.example.jsx?raw"; 8 | 9 | import AnimationReplaceExample from "../organisms/AnimationReplace.example"; 10 | import animationReplaceExample from "../../../../../src/ui/organisms/AnimationReplace.example.jsx?raw"; 11 | 12 | import AnimationDelayExample from "../organisms/AnimationDelay.example"; 13 | import animationDelayExample from "../../../../../src/ui/organisms/AnimationDelay.example.jsx?raw"; 14 | 15 | import AnimationChangeStyleExample from "../organisms/AnimationChangeStyle.example"; 16 | import animationChangeStyleExample from "../../../../../src/ui/organisms/AnimationChangeStyle.example.jsx?raw"; 17 | 18 | const Animation = (props) => { 19 | usePage({ ...props, pageName: "Animation" }); 20 | return ( 21 | <> 22 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | export default Animation; 48 | -------------------------------------------------------------------------------- /src/ui/pages/AsciiDoc.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | /*Sample*/ 6 | import AsciiDocExample from "../organisms/AsciiDoc.example"; 7 | import asciiDocExample from "../../../../../src/ui/organisms/AsciiDoc.example.jsx?raw"; 8 | 9 | const AsciiDocPage = (props) => { 10 | usePage({ ...props, pageName: "AsciiDoc" }); 11 | return ( 12 | <> 13 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default AsciiDocPage; 26 | -------------------------------------------------------------------------------- /src/ui/pages/Atoms.jsx: -------------------------------------------------------------------------------- 1 | import usePage from "../../usePage"; 2 | 3 | const Atoms = (props) => { 4 | usePage({ ...props, pageName: "Atoms" }); 5 | console.log("Develop Mode:", process.env.NODE_ENV); 6 | return <>This is atom; 7 | }; 8 | 9 | export default Atoms; 10 | -------------------------------------------------------------------------------- /src/ui/pages/Carousel.jsx: -------------------------------------------------------------------------------- 1 | import CodeExample from "organism-react-code"; 2 | import usePage from "../../usePage"; 3 | 4 | /*example*/ 5 | import CarouselAnimation from "../organisms/CarouselAnimation.example"; 6 | import carouselAnimation from "../../../../../src/ui/organisms/CarouselAnimation.example.jsx?raw"; 7 | 8 | import CarouselAnimationHideThumb from "../organisms/CarouselAnimationHideThumb.example"; 9 | import carouselAnimationHideThumb from "../../../../../src/ui/organisms/CarouselAnimationHideThumb.example.jsx?raw"; 10 | 11 | import CarouselHorizontalScroll from "../organisms/CarouselHorizontalScroll.example"; 12 | import carouselHorizontalScroll from "../../../../../src/ui/organisms/CarouselHorizontalScroll.example.jsx?raw"; 13 | 14 | const CarouselPage = (props) => { 15 | usePage({ ...props, pageName: "Carousel" }); 16 | return ( 17 | <> 18 | 24 | 25 | 26 | 27 | 33 | 34 | 35 | 36 | 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default CarouselPage; 47 | -------------------------------------------------------------------------------- /src/ui/pages/Code.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | import CodeExampleExample from "../organisms/CodeExample.example"; 6 | 7 | import CodeEditorExample from "../organisms/CodeEditor.example"; 8 | import codeEditorExample from "../../../../../src/ui/organisms/CodeEditor.example.jsx?raw"; 9 | 10 | const Code = (props) => { 11 | usePage({ ...props, pageName: "Code" }); 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export default Code; 24 | -------------------------------------------------------------------------------- /src/ui/pages/D3.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | /*Sample*/ 6 | import D3PieChart from "../organisms/D3PieChart.example"; 7 | import d3PieChart from "../../../../../src/ui/organisms/D3PieChart.example.jsx?raw"; 8 | 9 | import D3BarChart from "../organisms/D3BarChart.example"; 10 | import d3BarChart from "../../../../../src/ui/organisms/D3BarChart.example.jsx?raw"; 11 | 12 | import D3LineChart from "../organisms/D3LineChart.example"; 13 | import d3LineChart from "../../../../../src/ui/organisms/D3LineChart.example.jsx?raw"; 14 | 15 | import D3AreaChart from "../organisms/D3AreaChart.example"; 16 | import d3AreaChart from "../../../../../src/ui/organisms/D3AreaChart.example.jsx?raw"; 17 | 18 | import D3Uml from "../organisms/D3Uml.example"; 19 | import d3Uml from "../../../../../src/ui/organisms/D3Uml.example.jsx?raw"; 20 | 21 | import StockChart from "../organisms/StockChart.example"; 22 | import stockChart from "../../../../../src/ui/organisms/StockChart.example.jsx?raw"; 23 | 24 | const D3 = (props) => { 25 | usePage({ ...props, pageName: "D3" }); 26 | return ( 27 | <> 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | export default D3; 56 | -------------------------------------------------------------------------------- /src/ui/pages/D3UmlPerf.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | /*Sample*/ 6 | 7 | import D3UmlPerfExample from "../organisms/D3UmlPerf.example"; 8 | import d3UmlPerfExample from "../../../../../src/ui/organisms/D3UmlPerf.example.jsx?raw"; 9 | 10 | const D3UmlPerf = (props) => { 11 | usePage({ ...props, pageName: "D3UmlPerf" }); 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default D3UmlPerf; 22 | -------------------------------------------------------------------------------- /src/ui/pages/Form.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | /*examples*/ 6 | import Dropzone from "../organisms/Dropzone.example"; 7 | import dropzone from "../../../../../src/ui/organisms/Dropzone.example.jsx?raw"; 8 | 9 | import RadioGroup from "../organisms/RadioGroup.example"; 10 | import radioGroup from "../../../../../src/ui/organisms/RadioGroup.example.jsx?raw"; 11 | 12 | import Checkbox from "../organisms/Checkbox.example"; 13 | import checkbox from "../../../../../src/ui/organisms/Checkbox.example.jsx?raw"; 14 | 15 | import ErrorForm from "../organisms/ErrorForm.example"; 16 | import errorForm from "../../../../../src/ui/organisms/ErrorForm.example.jsx?raw"; 17 | 18 | import ConstraintForm from "../organisms/ConstraintForm.example"; 19 | import constraintForm from "../../../../../src/ui/organisms/ConstraintForm.example.jsx?raw"; 20 | 21 | const Form = props => { 22 | usePage({ ...props, pageName: "Form" }); 23 | return ( 24 | <> 25 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ); 55 | }; 56 | 57 | export default Form; 58 | -------------------------------------------------------------------------------- /src/ui/pages/GrapesJs.jsx: -------------------------------------------------------------------------------- 1 | /*Base*/ 2 | import CodeExample from "organism-react-code"; 3 | import usePage from "../../usePage"; 4 | 5 | /*Sample*/ 6 | import GrapesJsExample from "../organisms/GrapesJs.example"; 7 | import grapesJsExample from "../../../../../src/ui/organisms/GrapesJs.example.jsx?raw"; 8 | 9 | import RTEExample from "../organisms/RTE.example"; 10 | import rteExample from "../../../../../src/ui/organisms/RTE.example.jsx?raw"; 11 | 12 | const GrapesJs = (props) => { 13 | usePage({ ...props, pageName: "GrapesJs" }); 14 | return ( 15 | <> 16 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default GrapesJs; 33 | -------------------------------------------------------------------------------- /src/ui/pages/Icons.jsx: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | /*Base*/ 3 | import usePage from "../../usePage"; 4 | 5 | import AccessTime from "ricon/AccessTime"; 6 | import Account from "ricon/Account"; 7 | import Add from "ricon/Add"; 8 | import BarChart from "ricon/BarChart"; 9 | import Blur from "ricon/Blur"; 10 | import Build from "ricon/Build"; 11 | import Calendar from "ricon/Calendar"; 12 | import ChevronRight from "ricon/ChevronRight"; 13 | import CircleLoading from "ricon/CircleLoading"; 14 | import Code from "ricon/Code"; 15 | import Dashboard from "ricon/Dashboard"; 16 | import Delete from "ricon/Delete"; 17 | import Description from "ricon/Description"; 18 | import Device from "ricon/Device"; 19 | import Download from "ricon/Download"; 20 | import Dropdown from "ricon/Dropdown"; 21 | import Edit from "ricon/Edit"; 22 | import Email from "ricon/Email"; 23 | 24 | // Alert 25 | import Error from "ricon/Error"; 26 | import Warning from "ricon/Warning"; 27 | 28 | import Exit from "ricon/Exit"; 29 | import Facebook from "ricon/Facebook"; 30 | import FacebookMessage from "ricon/FacebookMessage"; 31 | import FeaturedPlayList from "ricon/FeaturedPlayList"; 32 | import File from "ricon/File"; 33 | import Git from "ricon/Git"; 34 | import Hamburger from "ricon/Hamburger"; 35 | import HamburgerToArrow from "ricon/HamburgerToArrow"; 36 | import HamburgerToX from "ricon/HamburgerToX"; 37 | import Help from "ricon/Help"; 38 | import Home from "ricon/Home"; 39 | import Lightbulb from "ricon/Lightbulb"; 40 | import Link from "ricon/Link"; 41 | import Monetization from "ricon/Monetization"; 42 | import MyLocation from "ricon/MyLocation"; 43 | import Notification from "ricon/Notification"; 44 | import Npm from "ricon/Npm"; 45 | import Person from "ricon/Person"; 46 | import Phone from "ricon/Phone"; 47 | import Pin from "ricon/Pin"; 48 | import Play from "ricon/Play"; 49 | import PlayListAdd from "ricon/PlayListAdd"; 50 | import Pulse from "ricon/Pulse"; 51 | import Refresh from "ricon/Refresh"; 52 | import Reply from "ricon/Reply"; 53 | import Search from "ricon/Search"; 54 | import Settings from "ricon/Settings"; 55 | import Shopee from "ricon/Shopee"; 56 | import ShoppingCart from "ricon/ShoppingCart"; 57 | import Sort from "ricon/Sort"; 58 | import Sync from "ricon/Sync"; 59 | import Timer from "ricon/Timer"; 60 | import TouchApp from "ricon/TouchApp"; 61 | import VerifiedUser from "ricon/VerifiedUser"; 62 | import Video from "ricon/Video"; 63 | import ViewModule from "ricon/ViewModule"; 64 | import Visibility from "ricon/Visibility"; 65 | import Wallet from "ricon/Wallet"; 66 | import Wifi from "ricon/Wifi"; 67 | import X from "ricon/X"; 68 | import ZoomIn from "ricon/ZoomIn"; 69 | 70 | /** 71 | * @type {[string, React.ReactElement][]} 72 | */ 73 | const icons = [ 74 | ["AccessTime", ], 75 | ["AccessTime (fill)", ], 76 | ["AccessTime (update)", ], 77 | ["Account", ], 78 | ["Account (circle)", ], 79 | ["Account (supervisor)", ], 80 | ["Add", ], 81 | ["Add (box)", ], 82 | ["Add (circle)", ], 83 | ["Add (circleOutline)", ], 84 | ["BarChart", ], 85 | ["Blur", ], 86 | ["Build", ], 87 | ["Calendar", ], 88 | ["ChevronRight", ], 89 | ["CircleLoading", ], 90 | ["Code", ], 91 | ["Dashboard", ], 92 | ["Delete", ], 93 | ["Delete (forever)", ], 94 | ["Delete (sweep)", ], 95 | ["Description", ], 96 | ["Device (desktop)", ], 97 | ["Device (tablet)", ], 98 | ["Device (phone)", ], 99 | ["Download", ], 100 | ["Download (file)", ], 101 | ["Dropdown", ], 102 | ["Dropdown (up)", ], 103 | ["Dropdown (right)", ], 104 | ["Dropdown (left)", ], 105 | ["Edit", ], 106 | ["Email", ], 107 | 108 | // Alert 109 | ["Error", ], 110 | ["Warning", ], 111 | 112 | ["Exit", ], 113 | ["Facebook", ], 114 | ["FacebookMessage", ], 115 | ["FeaturedPlayList", ], 116 | ["File", .js], 117 | ["Git", ], 118 | ["Hamburger", ], 119 | ["HamburgerToArrow", ], 120 | ["HamburgerToX", ], 121 | ["Help", ], 122 | ["Home", ], 123 | ["Lightbulb", ], 124 | ["Lightbulb (circle)", ], 125 | ["Lightbulb (outline)", ], 126 | ["Link", ], 127 | ["Monetization", ], 128 | ["Monetization", ], 129 | ["MyLocation (fixed)", ], 130 | ["MyLocation (off)", ], 131 | ["MyLocation (on)", ], 132 | ["MyLocation (loading)", ], 133 | ["Notification", ], 134 | ["Notification (active)", ], 135 | ["Notification (none)", ], 136 | ["Notification (off)", ], 137 | ["Notification (paused)", ], 138 | ["Npm", ], 139 | ["Person", ], 140 | ["Person (add)", ], 141 | ["Phone", ], 142 | ["Pin", ], 143 | ['Pin (label="A")', ], 144 | ["Play", ], 145 | ["PlayListAdd", ], 146 | ["Pulse", ], 147 | ["Pulse (breath)", ], 148 | ["Refresh", ], 149 | ["Reply", ], 150 | ["Reply (right)", ], 151 | ["Search", ], 152 | ["Settings", ], 153 | ["Settings", ], 154 | ["Shopee", ], 155 | ["ShoppingCart", ], 156 | ["Sort", ], 157 | ["Sync", ], 158 | ["Sync (disabled)", ], 159 | ["Sync (problem)", ], 160 | ["Timer", ], 161 | ["Timer (off)", ], 162 | ["TouchApp", ], 163 | ["VerifiedUser", ], 164 | ["Video",