feat: add status fn/items nested condition

afeiship · Jul 18, 2024 · 8eebeae · 8eebeae
1 parent 3690a2d
commit 8eebeae
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 225 deletions.
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -14,17 +14,20 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@jswork/react-status-manager": "^1.0.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
+    "postcss": "^8.4.39",
     "sass": "^1.69.5",
-    "vite": "^4.4.5",
-    "@jswork/react-status-manager": "^1.0.0"
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   }
 }
diff --git a/packages/example/postcss.config.js b/packages/example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/example/src/App.css b/packages/example/src/App.css
diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
@@ -1,107 +1,23 @@
-import React from 'react';
-import ReactStatusManager from '../../lib/src';
-import '@jswork/react-status-manager/src/style.scss';
-import './App.css';
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'init',
-      smvalue: 'N',
-      step: 0,
-    };
-  }
-
-  click1 = (e) => {
-    this.setState({ value: 'init' });
-    console.log('click1');
-  };
-  click2 = (e) => {
-    this.setState({ value: 'active' });
-    console.log('click2');
-  };
-  click3 = (e) => {
-    this.setState({ value: 'running' });
-    console.log('click3');
-  };
-  click4 = (e) => {
-    this.setState({ value: 'finish' });
-    console.log('click4');
-  };
-
-  _click5 = (e) => {
-    this.setState({
-      smvalue: 'A',
-    });
-  };
-
-  _clickStep = (e) => {
-    let step = this.state.step;
-    this.setState({
-      step: step === 3 ? 0 : step + 1,
-    });
-  };
-
-  render() {
-    return (
-      <>
-        <ReactStatusManager
-          as="div"
-          size="16px"
-          value={this.state.value}
-          items={['init', 'active', 'running', 'finish']}>
-          <span>下拉刷新</span>
-          <span>释放更新</span>
-          <img
-            width="30"
-            src={'https://assets-cdn.shimo.im/assets/images/loading-b67e5a67dc.gif'}
-            alt=""
-          />
-          <span>更新完毕</span>
-        </ReactStatusManager>
-
-        <ReactStatusManager
-          as="div"
-          value={this.state.smvalue}
-          className={`wp-icon-${this.state.smvalue}`}
-          items={['N', 'A', 'F']}>
-          <span>未开始</span>
-          <span>进行中</span>
-          <span>已经结束</span>
-        </ReactStatusManager>
-
-        <button className="button is-primary is-fullwidth mb-2" onClick={this.click1}>
-          to `init`
-        </button>
-        <button className="button is-primary is-fullwidth mb-2" onClick={this.click2}>
-          to `active`
-        </button>
-        <button className="button is-primary is-fullwidth mb-2" onClick={this.click3}>
-          to `running`
-        </button>
-        <button className="button is-primary is-fullwidth mb-2" onClick={this.click4}>
-          to `finish`
-        </button>
-        <button className="button is-primary is-fullwidth mb-2" onClick={this._click5}>
-          SetSMvalue
-        </button>
-
-        <h2>Wizard</h2>
-        <button className="button is-primary is-fullwidth mb-2" onClick={this._clickStep}>
-          next step
-        </button>
-        <ReactStatusManager value={this.state.step} items={[0, 1, 2, 3]}>
-          <div className="step">step1,input password</div>
-          <div className="step">step2,input phone</div>
-          <div className="step">step3,input other info</div>
-          <div className="step">
-            step4,do submit! <button>SUBMIT</button>
-          </div>
-        </ReactStatusManager>
-      </>
-    );
-  }
-}
-
+import { useState } from 'react';
+import Rsm from '@jswork/react-status-manager/src';
+
+const App = () => {
+  const [s1, setS1] = useState('init');
+
+  return (
+    <div>
+      <h3>Normal Case</h3>
+      <nav>
+        <button onClick={() => setS1('a')}>A</button>
+        <button onClick={() => setS1('b')}>B</button>
+        <button onClick={() => setS1('c')}>C</button>
+      </nav>
+      <Rsm items={['a', 'b', 'c']} value={s1}>
+        <div>Status - A</div>
+        <div>Status - B</div>
+        <div>Status - C</div>
+      </Rsm>
+    </div>
+  );
+};
 export default App;
diff --git a/packages/example/src/index.css b/packages/example/src/index.css
@@ -1,69 +1,3 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/example/tailwind.config.js b/packages/example/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/packages/lib/src/index.tsx b/packages/lib/src/index.tsx
@@ -1,8 +1,10 @@
-import React, { Fragment, Component } from 'react';
+import React, { Fragment, Component, ReactNode } from 'react';
+
+type ItemsCallback = (args: { child: ReactNode; index: number; value: any }) => ReactNode;
 
 export interface ReactStatusManagerProps extends React.PropsWithChildren<any> {
   className?: string;
-  items: any[];
+  items: any[] | ItemsCallback;
   value?: any;
   as?: any;
   asProps?: any;
@@ -16,7 +18,13 @@ export default class ReactStatusManager extends Component<ReactStatusManagerProp
 
   get children() {
     const { value, children, items } = this.props;
-    return children.map((child, index) => {
+    return children.map((child: ReactNode, index: number) => {
+      if (typeof items === 'function') return items({ child, index, value });
+      const status = items[index];
+      const isNestedArray = Array.isArray(status);
+      if (typeof status !== value && isNestedArray) {
+        return status.includes(value) ? child : null;
+      }
       return value === items[index] ? child : null;
     });
   }

diff --git a/packages/lib/src/style.scss b/packages/lib/src/style.scss