close #26, add render sequence examples

stories/RenderSequence/index.stories.mdx

@@ -0,0 +1,5 @@
+import Index from './index'
+
+<Meta title="Usage/render-sequence" />
+
+<Index />

stories/RenderSequence/index.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { applyMiddleware, createStore, thunk, Provider } from '@xhs/relinx'
+import { Halation } from '../../src'
+
+import PluginARegister from './plugin-a/register'
+import PluginBRegister from './plugin-b/register'
+import PluginCRegister from './plugin-c/register'
+import PluginDRegister from './plugin-d/register'
+
+const halationState = [{
+  name: 'plugin-a',
+  key: 'plugin-a-1',
+  prevSibling: null,
+  nextSibling: 'plugin-b-1',
+  children: [],
+  type: 'block',
+}, {
+  name: 'plugin-b',
+  key: 'plugin-b-1',
+  prevSibling: 'plugin-a-1',
+  nextSibling: 'plugin-c-1',
+  children: [],
+  type: 'block',
+  strategies: [{
+    type: 'event',
+    resolver: ({ event }) => {
+      const { pluginBVisible } = event
+      return !!pluginBVisible
+    }
+  }]
+}, {
+  name: 'plugin-c',
+  key: 'plugin-c-1',
+  prevSibling: 'plugin-b-1',
+  nextSibling: 'plugin-d-1',
+  children: [],
+  type: 'block',
+  strategies: [{
+    type: 'event',
+    resolver: ({ event }) => {
+      const { pluginCVisible } = event
+      return !!pluginCVisible
+    }
+  }]
+}, {
+  name: 'plugin-d',
+  key: 'plugin-d-1',
+  prevSibling: 'plugin-c-1',
+  nextSibling: null,
+  children: [],
+  type: 'block',
+  strategies: [{
+    type: 'event',
+    resolver: ({ event }) => {
+      const { pluginDVisible } = event
+      return !!pluginDVisible
+    }
+  }]
+}]
+
+const blockRenderFn = blockProps => {
+  const { type } = blockProps
+
+  if (type === 'block') {
+    return props => {
+      const { children, ...rest } = props
+      return (
+        <div className="block-render-fn">
+          {React.cloneElement(children, {...rest, location: 'shanghai'})}
+        </div>
+      )
+    }
+  }
+}
+
+const store = createStore({
+  models: {},
+}, applyMiddleware(thunk))
+
+export default () => {
+  const registers = [
+    PluginARegister,
+    PluginBRegister,
+    PluginCRegister,
+    PluginDRegister
+  ]
+
+  return (
+    <Provider
+      store={store}
+    >
+      <Halation
+        name='super'
+        halationState={halationState}
+        registers={registers}
+        blockRenderFn={blockRenderFn}
+        store={store}
+        events={{
+          pluginAVisible: true,
+          pluginBVisible: false,
+          pluginCVisible: false,
+          pluginDVisible: false,
+        }}
+      />
+    </Provider>
+  )
+}

stories/RenderSequence/plugin-a/index.tsx

@@ -0,0 +1,15 @@
+import React, { useCallback } from 'react'
+import { observe } from '@xhs/relinx'
+
+export default observe((props) => {
+  const { dispatchEvent } = props
+  const handleClick = useCallback(() => {
+    dispatchEvent('pluginBVisible')
+  }, [])
+
+  return (
+    <button onClick={handleClick}>
+      trigger plugin-b render
+    </button>
+  )
+})

stories/RenderSequence/plugin-a/register.ts

@@ -0,0 +1,6 @@
+export default function PluginComponent() {
+  return {
+    name: 'plugin-a',
+    getComponent: () => require('./index'),
+  };
+}

stories/RenderSequence/plugin-b/index.tsx

@@ -0,0 +1,15 @@
+import React, { useCallback } from 'react'
+import { observe } from '@xhs/relinx'
+
+export default observe((props) => {
+  const { dispatchEvent } = props
+  const handleClick = useCallback(() => {
+    dispatchEvent('pluginCVisible')
+  }, [])
+
+  return (
+    <button onClick={handleClick}>
+      trigger plugin-c render
+    </button>
+  )
+})

stories/RenderSequence/plugin-b/register.ts

@@ -0,0 +1,6 @@
+export default function PluginComponent() {
+  return {
+    name: 'plugin-b',
+    getComponent: () => require('./index'),
+  };
+}

stories/RenderSequence/plugin-c/index.tsx

@@ -0,0 +1,15 @@
+import React, { useCallback } from 'react'
+import { observe } from '@xhs/relinx'
+
+export default observe((props) => {
+  const { dispatchEvent } = props
+  const handleClick = useCallback(() => {
+    dispatchEvent('pluginDVisible')
+  }, [])
+
+  return (
+    <button onClick={handleClick}>
+      trigger plugin-d render
+    </button>
+  )
+})

stories/RenderSequence/plugin-c/register.ts

@@ -0,0 +1,6 @@
+export default function PluginComponent() {
+  return {
+    name: 'plugin-c',
+    getComponent: () => require('./index'),
+  };
+}

stories/RenderSequence/plugin-d/index.tsx

@@ -0,0 +1,14 @@
+import React, { useCallback } from 'react'
+import { observe } from '@xhs/relinx'
+
+export default observe(() => {
+  const handleClick = useCallback(() => {
+    alert('finish')
+  }, [])
+
+  return (
+    <button onClick={handleClick}>
+      finish
+    </button>
+  )
+})

stories/RenderSequence/plugin-d/register.ts

@@ -0,0 +1,6 @@
+export default function PluginComponent() {
+  return {
+    name: 'plugin-d',
+    getComponent: () => require('./index'),
+  };
+}