onchain-uikit 0.0.2 → 0.0.6

package/src/index.ts

@@ -1,3 +1,6 @@
-import { Button as XsButton } from "./stories/Button";
+// import { Button as XsButton } from "./stories/Button";
+import OnChainProvider from "./stories/OnChainProvider";
+import XsButton from "./stories/XsButton";
+import PlmSelect from "./stories/PlmSelect";
 
-export { XsButton };
+export { OnChainProvider, XsButton, PlmSelect };

package/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import App from "./App.tsx";
+import App, { rootContainer } from "./App";
 
+/** vite工程入口，跟storybook无关 */
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
+  rootContainer(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  )
 );

package/src/stories/OnChainProvider.tsx

@@ -0,0 +1,37 @@
+import { ConfigProvider } from "antd";
+import zhCN from "antd/lib/locale/zh_CN";
+import React from "react";
+
+/**
+ * Antd Provider
+ */
+export interface OnChainProviderProps {
+  /** 设置统一样式前缀 */
+  prefixCls?: string;
+  /** 内容 */
+  children?: React.ReactNode;
+}
+
+const OnChainProvider = (
+  { prefixCls = "frontend", ...props }: OnChainProviderProps,
+  ref
+) => {
+  ConfigProvider.config({
+    prefixCls: prefixCls,
+  });
+
+  const root = React.createElement(
+    ConfigProvider,
+    {
+      prefixCls: prefixCls,
+      locale: zhCN,
+      input: { autoComplete: "off" },
+      autoInsertSpaceInButton: false,
+    },
+    props.children
+  );
+
+  return root;
+};
+
+export default OnChainProvider;

package/src/stories/PlmMosaic.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+// import PlmMosaic from "@/components/PlmMosaic";
+import PlmMosaic from "../components/PlmMosaic";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "PLM/Component/PlmMosaic",
+  component: PlmMosaic,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof PlmMosaic>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+export const InLineTrue: Story = {
+  args: { inLine: true },
+};
+
+// export const InLineFalse: Story = {
+//   args: { inLine: false },
+// };

package/src/stories/PlmSelect/PlmSelect.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import PlmSelect from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "PLM/Component/PlmSelect",
+  component: PlmSelect,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    /** 列表值 */
+    options: [
+      { label: "label1", value: "1" },
+      { label: "label2", value: "2" },
+      { label: "label3", value: "3" },
+    ],
+  },
+} satisfies Meta<typeof PlmSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+export const Large: Story = {
+  args: {
+    pane: {
+      cols: 5,
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    pane: {
+      cols: 3,
+    },
+  },
+};

package/src/stories/PlmSelect/index.module.less

@@ -0,0 +1,73 @@
+.pane {
+  // padding: 10px;
+  // .item {
+  //   // width: 150px;
+  //   float: left;
+  //   cursor: pointer;
+  //   flex: 1;
+  //   text-align: left;
+  //   height: 30px;
+  //   line-height: 30px;
+  //   padding-left: 10px;
+  //   &.selected {
+  //     background-color: rgba(23, 97, 253, 0.08);
+  //   }
+  //   &:hover {
+  //     background-color: rgba(23, 97, 253, 0.2);
+  //   }
+  // }
+}
+.main {
+  :global {
+    .frontend-select-multiple .frontend-select-selection-overflow {
+      gap: 1px !important;
+    }
+
+    .frontend-select-dropdown-menu {
+      background-color: aqua;
+      scrollbar-width: thin;
+      scrollbar-color: #d3d2d2 #ffffff;
+
+      ::-webkit-scrollbar {
+        height: 6px;
+        width: 6px;
+      }
+      ::-webkit-scrollbar-thumb {
+        // border-radius: 3px;
+        background: #e0e0e0;
+      }
+      ::-webkit-scrollbar-track {
+        &:horizontal {
+          // border-right: 1px solid @sider-border;
+          // border-top: 1px solid @sider-border;
+        }
+        &:vertical {
+          // border-bottom: 1px solid @sider-border;
+          // border-left: 1px solid @sider-border;
+        }
+        padding: 2px;
+        box-shadow: 0;
+        border-radius: 0;
+        background: #ffffff;
+      }
+    }
+    .rc-virtual-list-holder-inner {
+    }
+  }
+}
+:global {
+  .backend-select-pane {
+    padding: 10px;
+    .rc-virtual-list-holder-inner {
+      display: unset !important;
+      /* height: 400px; */
+      width: 100% !important;
+      /* flex-direction: row; */
+      /* justify-content: space-around; */
+      .backend-select-item-option {
+        width: 25% !important;
+        float: left !important;
+      }
+    }
+  }
+}

package/src/stories/PlmSelect/index.tsx

@@ -0,0 +1,136 @@
+/*
+ * @Author: hny_147
+ * @Date: 2022-02-04 19:01:35
+ * @Description: select组件
+ */
+import { BaseComponentProps } from "@/typings";
+import classNames from "classnames";
+import { forwardRef, useImperativeHandle } from "react";
+import styles from "./index.module.less";
+import { Select, SelectProps, Tag } from "antd";
+import { omit } from "lodash";
+import { useRef } from "react";
+import Highlighter from "react-highlight-words";
+import { useState, useEffect } from "react";
+// import { Authority } from "@/utils/authority";
+import PlmMosaic from "../../components/PlmMosaic";
+
+export interface PlmSelectProps extends BaseComponentProps, SelectProps<any> {
+  pane?: {
+    cols?: number;
+    item?: BaseComponentProps;
+  };
+
+  /** 分页信息 */
+  pagination: {
+    /**网络请求URL */
+    url: string;
+    page: number;
+    pageSize: number;
+    total: number;
+  };
+}
+
+export interface PlmSelectForwardRefProps {}
+
+const PlmSelect = forwardRef(
+  (props: PlmSelectProps, ref) => {
+    const paneDropRef = useRef(null);
+    const mainRef = useRef(null);
+    const { Option } = Select;
+    const newProps = { ...props };
+
+    const [searchValue, setSearchValue] = useState<string>("");
+
+    const getHighlighter = (label: string, searchValue: string) => {
+      return (
+        <Highlighter
+          //@ts-ignore
+          highlightStyle={{
+            color: "#F5325C",
+            backgroundColor: "rgb(0, 0, 0, 0)",
+            padding: "0",
+          }}
+          //@ts-ignore
+          searchWords={[searchValue ? searchValue.toString() : ""]}
+          autoEscape
+          textToHighlight={label ? label.toString() : ""}
+        />
+      );
+    };
+
+    if (props.pagination) {
+      newProps.onPopupScroll = (e) => {
+        // console.log(e);
+      };
+      newProps.dropdownRender = (menu) => {
+        return (
+          <div
+            ref={paneDropRef}
+            className={classNames(styles.pane, "clearfix")}
+          >
+            {menu}
+            <div>只显示20条数据，共XXX条</div>
+          </div>
+        );
+      };
+    }
+
+    if (newProps.loading) {
+      return <Select value={""} open={false} loading={true}></Select>;
+    }
+    return (
+      <Select
+        style={{ ...newProps.style, width: "100%" }}
+        className={classNames(styles.main, newProps.className, {
+          rrrrr: true,
+          [styles.pane]: props.pane,
+        })}
+        {...omit(newProps, ["options"])}
+        onSearch={(value) => {
+          setSearchValue(value);
+        }}
+        filterOption={(inputValue, option: any) => {
+          return option.label && option.label.indexOf(inputValue) >= 0;
+        }}
+        dropdownClassName={styles.plm_select_dropdown}
+        showSearch
+        allowClear={props.allowClear == undefined ? true : props.allowClear}
+        optionLabelProp="label"
+      >
+        {props.options?.map((option: any) => {
+          if (false) {
+            // if (Authority.isMosaic(option.label)) {
+            return (
+              <Option disabled={true}>
+                <PlmMosaic />
+              </Option>
+            );
+          }
+          return (
+            <Option
+              {...option}
+              value={option.value}
+              disabled={option.disabled}
+              key={option.value}
+              label={option.label}
+            >
+              <div
+                title={option.label}
+                style={{
+                  width: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {getHighlighter(option.label, searchValue)}
+              </div>
+            </Option>
+          );
+        })}
+      </Select>
+    );
+  }
+);
+
+export default PlmSelect;

package/src/stories/XsButton.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import XsButton from "./XsButton";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "PLM/Component/XsButton",
+  component: XsButton,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof XsButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+export const Init: Story = {
+  args: { label: "asdf", btnType: "default", btnType2: "default", custObj: {} },
+};

package/src/stories/XsButton.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Button } from "antd";
+import { ButtonType } from "antd/lib/button";
+
+export interface XsButtonProps {
+  /** 按钮文本 */
+  label: string;
+  /** 按钮类型 */
+  btnType?: ButtonType;
+  /** 按钮类型2 */
+  btnType2?: "default" | "primary" | "ghost" | "dashed" | "link" | "text";
+  /** Optional click handler */
+  onClick?: () => void;
+  /** 自定义对象 */
+  custObj?: custObjTemp;
+}
+/** 对象 */
+type custObjTemp = {
+  /** 年龄 */
+  name?: string;
+  /** 姓名 */
+  age?: number;
+};
+
+const XsButton = (props: XsButtonProps, ref) => {
+  return (
+    <Button type={props.btnType} className="my-button">
+      {props.custObj?.name || props.label}
+    </Button>
+  );
+};
+
+export default XsButton;