ht-components 1.0.1 → 1.0.2

package/README.md

@@ -6,13 +6,15 @@
 | 参数 | 类型 | 含义 | 必填 | 默认值 |
 | :------: | :-------: | :-------: | :------: | :------: |
 | rowKey  | string/function   |  表格列数据的key  |  是  |  -  |
-| columns  | array |  表格列信息，同antd配置  |  是  |  -  |
+| columns  | array |  表格列信息，同antd配置，新增renderFnName  |  是  |  -  |
+| columnsFnMap  | object | renderFnName的方法集合 |  -  |  -  |
 | headerJsx  | jsx |  筛选框和表格之间的内容  |  -  |  -  |
 | tableHeight  | string/number |  表格高度，只支持px  |  -  |  -  |
 | filterList  | array |  表格筛选项，见“filterList”  |  -  |  -  |
 | isRequest  | boolean |  是否发送请求  |  -  |  true  |
 | dataList  | array |  表格数据，不发送请求时使用  |  -  |  -  |
 | api  | string |  接口，发送请求时使用  |  -  |  -  |
+| resListKey  | string |  返回参数中的列表key  |  -  |  -  |
 | rowSelection  | Object |  表格复选配置  |  -  |  -  |
 | additionalParameters  | object |  请求数据的额外参数  |  -  |  -  |
 | dealReqDataFn  | function |  对请求数据进行自定义处理  |  -  |  -  |
@@ -36,7 +38,14 @@
 | filterDataKey  | string | 查询时给后端的参数key |  是  |  -  |
 | value  | string/array |  初始参数，范围选择时传数组  |  -  |  -  |
 | placeholder  | string/array  |  无内容时的填充项，范围选择时传数组  |  -  |  -  |
-| options | array |  filterType为select时的可选项，{label, value}  |  -  |  -  |
+| options | array/object |  filterType为select时的可选项，[{label, value}]或{value: label}  |  -  |  -  |
+| optionsApi  | string |  filterType为select时的可选项，接口，请求options列表，优先级高于options配置 |  -  |  -  |
+| resListKey  | string |  filterType为select时的可选项，options接口返回参数中的列表key  |  -  |  -  |
+| labelKey  | string |  filterType为select时的可选项，options接口返回参数中的label key  |  -  |  'label'  |
+| valueKey  | string |  filterType为select时的可选项，options接口返回参数中的value key  |  -  |  'value'  |
+| additionalParameters  | object |  filterType为select时的可选项，额外请求参数  |  -  |  - |
+| isLazy  | boolean |  filterType为select时的可选项，是否懒加载数据  |  -  |  false  |
+| lazySearchKey  | string |  filterType为select时的可选项，isLazy为true时的搜索key  |  -  |  'keyword'  |
 | picker | string |  filterType为datePicker时使用,日期组件可选范围（date/month/week/range）  |  -  |  date  |
 
 # HTScreen
@@ -46,6 +55,7 @@
 | 参数 | 类型 | 含义 | 必填 | 默认值 |
 | :------: | :-------: | :-------: | :------: | :------: |
 | filterList  | array |  筛选项，同HTTable  |  是  |  -  |
+| isShowSearchBtn  | boolean |  是否显示搜索按钮  |  -  |  true  |
 | search  | function |  搜索项，(searchJson) => {} |  -  |  -  |
 
 ## 方法

package/components/HTScreen/index.js

@@ -1 +1 @@
-import React,{useState,useImperativeHandle,forwardRef}from"react";import{Button}from"antd";import"./index.less";const path=require("path");const files=require.context("./render",false,/\.js$/);const RenderModules={};files.keys().forEach(e=>{const t=path.basename(e,".js");RenderModules[t]=files(e).default||files(e)});export default forwardRef((e,t)=>{const[s,r]=useState(e.filterList||[]);useImperativeHandle(t,()=>{return{search:i}});const a=(e,t,a)=>{if(!e)return"";const r=n({...t});return React.createElement(e,{originData:r,componentValChange:e=>l(e,a),componentPressEnter:()=>i()})};const n=e=>{const t=e.filterType==="datePicker"&&e.picker==="range"?"300px":"200px";e.style={width:t,...e.style||{}};if(e.filterType==="input"){e.maxLength=e.maxLength||50}return e};const l=(e,t)=>{const a=[...s];a[t].value=e.value;r(a)};const c=e=>{return`render${e.slice(0,1).toUpperCase()+e.slice(1)}`};const i=()=>{const r={};s.map(a=>{if(Array.isArray(a.filterDataKey)){a.filterDataKey.map((e,t)=>{r[e]=a.value[t]})}else{r[a.filterDataKey]=a.value}});e.search&&e.search(r)};return React.createElement("div",{className:"HT-screen-components"},React.createElement("div",{className:"screen-list"},!!e.filterList&&!!e.filterList.length&&e.filterList.map((e,t)=>React.createElement("div",{key:t,className:"screen-item"},React.createElement("label",{className:"item-label"},e.label),React.createElement("div",{className:"item-content"},!!e.filterType&&a(RenderModules[c(e.filterType)],e,t))))),React.createElement("div",{className:"screen-btn-group"},React.createElement(Button,{type:"primary",className:"submit-btn",onClick:()=>i()},"查询")))});
+import React,{useState,useImperativeHandle,forwardRef}from"react";import{Button}from"antd";import"./index.less";const path=require("path");const files=require.context("./render",false,/\.js$/);const RenderModules={};files.keys().forEach(e=>{const t=path.basename(e,".js");RenderModules[t]=files(e).default||files(e)});export default forwardRef((e,t)=>{const[s,r]=useState(e.filterList||[]);const a=e.isShowSearchBtn!==false;useImperativeHandle(t,()=>{return{search:o}});const n=(e,t,a)=>{if(!e)return"";const r=c({...t});return React.createElement(e,{originData:r,componentValChange:e=>l(e,a),componentPressEnter:()=>o()})};const c=e=>{const t=e.filterType==="datePicker"&&e.picker==="range"?"300px":"200px";e.style={width:t,...e.style||{}};if(e.filterType==="input"){e.maxLength=e.maxLength||50}return e};const l=(e,t)=>{const a=[...s];a[t].value=e.value;r(a)};const i=e=>{return`render${e.slice(0,1).toUpperCase()+e.slice(1)}`};const o=()=>{const r={};s.map(a=>{if(Array.isArray(a.filterDataKey)){a.filterDataKey.map((e,t)=>{r[e]=a.value[t]})}else{r[a.filterDataKey]=a.value}});e.search&&e.search(r)};return React.createElement("div",{className:"HT-screen-components"},React.createElement("div",{className:"screen-list"},!!e.filterList&&!!e.filterList.length&&e.filterList.map((e,t)=>React.createElement("div",{key:t,className:"screen-item"},React.createElement("label",{className:"item-label"},e.label),React.createElement("div",{className:"item-content"},!!e.filterType&&n(RenderModules[i(e.filterType)],e,t))))),!!a&&React.createElement("div",{className:"screen-btn-group"},React.createElement(Button,{type:"primary",className:"submit-btn",onClick:()=>o()},"查询")))});

package/components/HTScreen/render/renderSelect.js

@@ -1 +1 @@
-function _extends(){_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n){if(Object.prototype.hasOwnProperty.call(n,o)){e[o]=n[o]}}}return e};return _extends.apply(this,arguments)}import React,{useState}from"react";import{Select}from"antd";import{filterWhiteListData}from"../constant";const{Option}=Select;export default function RenderInput(n){const[o,a]=useState(n.originData||{});const t=e=>{const t={...o};t.value=e;a(t);n.componentValChange&&n.componentValChange(t)};return React.createElement(Select,_extends({},filterWhiteListData(o),{allowClear:o.allowClear!==false,showSearch:o.showSearch!==false,optionFilterProp:"children",filterOption:(e,t)=>t.props.children.toLowerCase().includes(e.toLowerCase()),onChange:e=>t(e)}),!!o.options&&!!o.options.length&&o.options.map(e=>React.createElement(Option,{key:e.value,value:e.value},e.label)))}
+function _extends(){_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o){if(Object.prototype.hasOwnProperty.call(o,n)){e[n]=o[n]}}}return e};return _extends.apply(this,arguments)}import React,{useEffect,useState}from"react";import{Select}from"antd";import request from"@services/request.js";import{filterWhiteListData}from"../constant";import{useDebounceHook}from"../../../hooks.js";const{Option}=Select;export default function RenderInput(o){const[n,s]=useState(()=>{const t=o.originData||{};if(!t.optionsApi){if(t.options&&Object.prototype.toString.call(t.options)==="[object Object]"){t.options=Object.keys(t.options).map(e=>({label:t.options[e],value:e}))}}else{t.options=[]}return t});const[e,t]=useState("");const a=useDebounceHook(e);useEffect(()=>{if(!n.isLazy){i()}},[]);const i=()=>{if(!n.optionsApi)return;const e=n.isLazy?{[`${n.lazySearchKey||"keyword"}`]:a}:{};request[n.optionsApi]({...n.additionalParameters||{},...e}).then(e=>{if(e.success){const t=n.resListKey?e.content[n.resListKey]:e.content;const o={...n};o.options=t.map(e=>({label:e[n.labelKey||"label"],value:e[n.valueKey||"value"]}));s(o)}})};const r=e=>{const t={...n};t.value=e;s(t);o.componentValChange&&o.componentValChange(t)};const c=e=>{if(n.isLazy){t(e)}};useEffect(()=>{if(!a)return;i()},[a]);return React.createElement(Select,_extends({},filterWhiteListData(n),{allowClear:n.allowClear!==false,showSearch:n.showSearch!==false,optionFilterProp:"children",filterOption:(e,t)=>t.props.children.toLowerCase().includes(e.toLowerCase()),onChange:e=>r(e),onSearch:e=>c(e)}),!!n.options&&!!n.options.length&&n.options.map(e=>React.createElement(Option,{key:e.value,value:e.value},e.label)))}

package/components/HTTable/index.js

@@ -1 +1 @@
-import React,{useEffect,useState,useRef,useImperativeHandle,forwardRef}from"react";import{Table}from"antd";import request from"@services/request.js";import HTScreen from"../HTScreen";import{isMustInit}from"./constant";import"./index.less";export default forwardRef((n,e)=>{isMustInit(n);const c=useRef(null);const t=useRef(null);const[a,r]=useState([]);const[s,o]=useState("100vh");const[i,l]=useState(()=>S(n.filterList));const[u,f]=useState({current:1,pageSize:10,...n.paginationInfo||{}});const[m,d]=useState(0);const p=n.isRequest!==false;const h=n.isPagination!==false;useEffect(()=>{if(!p){r(n.dataList||[])}setTimeout(()=>{let e=0;if(n.tableHeight){e=Number.parseFloat(n.tableHeight)}else{const r=document.documentElement.clientHeight;const s=c.current.offsetTop;e=r-s}let t=0;const a=c.current.getElementsByClassName("ant-table-thead");if(a&&a.length){t=a[0].offsetHeight}o(e-t)},0)},[]);useEffect(()=>{if(p){R()}},[u,i]);useImperativeHandle(e,()=>{return{search:()=>t.current.search()}});const R=()=>{let e={...i||{},...n.additionalParameters||{},limit:u.pageSize,page:u.current};if(n.dealReqDataFn){e=n.dealReqDataFn(e)}request[n.api](e).then(e=>{if(e.success){const t=e.content.totalCount||0;const a=n.successFn?n.successFn(e.content):e.content;d(t);r(a)}})};function S(e){if(!e)return{};const r={};e.map(a=>{if(Array.isArray(a.filterDataKey)){a.filterDataKey.map((e,t)=>{if(!e){throw new Error(`${a.label}未设置参数filterType`)}r[e]=a.value[t]})}else{if(!a.filterDataKey){throw new Error(`${a.label}未设置参数filterType`)}r[a.filterDataKey]=a.value}});return r}const g=e=>{const t={...u};t.current=1;f(t);e&&l(e)};const y=e=>{const t={...e};t.current=e.current;f(t)};return React.createElement("div",{className:"HT-table-components"},React.createElement(HTScreen,{ref:t,filterList:n.filterList,search:e=>{g(e)}}),!!n.headerJsx&&React.createElement("div",{className:"table-header"},n.headerJsx),React.createElement("div",{className:"table-content",ref:c},React.createElement(Table,{dataSource:a,columns:n.columns,pagination:h?{...u,total:m}:false,rowKey:n.rowKey,rowSelection:n.rowSelection||{},onChange:y,scroll:{x:true,y:s}})))});
+import React,{useEffect,useState,useRef,useImperativeHandle,forwardRef}from"react";import{Table}from"antd";import request from"@services/request.js";import HTScreen from"../HTScreen";import{isMustInit}from"./constant";import"./index.less";export default forwardRef((r,e)=>{isMustInit(r);const c=useRef(null);const t=useRef(null);const[a,s]=useState([]);const[n,o]=useState("100vh");const[l,i]=useState(()=>b(r.filterList));const[u,f]=useState({current:1,pageSize:10,...r.paginationInfo||{}});const[m,d]=useState(0);const[p,h]=useState(false);const S=r.isRequest!==false;const g=r.isPagination!==false;const y=r.columns;const R=r.columnsFnMap||{};y.map(e=>{const t=e.renderFnName;if(t&&R[t]){e.render=R[t]}});useEffect(()=>{if(!S){s(r.dataList||[])}setTimeout(()=>{let e=0;if(r.tableHeight){e=Number.parseFloat(r.tableHeight)}else{const s=document.documentElement.clientHeight;const n=c.current.offsetTop;e=s-n}let t=0;const a=c.current.getElementsByClassName("ant-table-thead");if(a&&a.length){t=a[0].offsetHeight}o(e-t)},0)},[]);useEffect(()=>{if(S){E()}},[u,l]);useImperativeHandle(e,()=>{return{search:()=>t.current.search()}});const E=()=>{let e={...l||{},...r.additionalParameters||{},limit:u.pageSize,page:u.current};if(r.dealReqDataFn){e=r.dealReqDataFn(e)}h(true);request[r.api](e).then(e=>{if(e.success){const t=e.content?.totalCount||0;const a=r.successFn?r.successFn(e.content):r.resListKey?e.content[r.resListKey]:e.content;d(t);s(a)}h(false)}).catch(()=>{h(false)})};function b(e){if(!e)return{};const s={};e.map(a=>{if(Array.isArray(a.filterDataKey)){a.filterDataKey.map((e,t)=>{if(!e){throw new Error(`${a.label}未设置参数filterType`)}s[e]=a.value[t]})}else{if(!a.filterDataKey){throw new Error(`${a.label}未设置参数filterType`)}s[a.filterDataKey]=a.value}});return s}const w=e=>{const t={...u};t.current=1;f(t);e&&i(e)};const H=e=>{const t={...e};t.current=e.current;f(t)};return React.createElement("div",{className:"HT-table-components"},React.createElement(HTScreen,{ref:t,filterList:r.filterList,search:e=>{w(e)}}),!!r.headerJsx&&React.createElement("div",{className:"table-header"},r.headerJsx),React.createElement("div",{className:"table-content",ref:c},React.createElement(Table,{dataSource:a,columns:y,pagination:g?{...u,total:m}:false,rowKey:r.rowKey,rowSelection:r.rowSelection||null,onChange:H,scroll:{x:true,y:n},loading:p})))});

package/hooks.js

@@ -0,0 +1 @@
+import{useEffect,useState}from"react";export const useDebounceHook=function(t,o=500){const[e,u]=useState(t);useEffect(()=>{const e=setTimeout(()=>u(t),o);return()=>clearTimeout(e)},[t,o]);return e};

package/index.js

@@ -1,3 +1 @@
-export { default as HTScreen } from './components/HTScreen';
-export { default as HTTable } from './components/HTTable';
-
+export{default as HTScreen}from"./components/HTScreen";export{default as HTTable}from"./components/HTTable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ht-components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {