ht-components 1.0.1

package/README.md

@@ -0,0 +1,54 @@
+
+# HTTable
+
+## 参数
+
+| 参数 | 类型 | 含义 | 必填 | 默认值 |
+| :------: | :-------: | :-------: | :------: | :------: |
+| rowKey  | string/function   |  表格列数据的key  |  是  |  -  |
+| columns  | array |  表格列信息，同antd配置  |  是  |  -  |
+| headerJsx  | jsx |  筛选框和表格之间的内容  |  -  |  -  |
+| tableHeight  | string/number |  表格高度，只支持px  |  -  |  -  |
+| filterList  | array |  表格筛选项，见“filterList”  |  -  |  -  |
+| isRequest  | boolean |  是否发送请求  |  -  |  true  |
+| dataList  | array |  表格数据，不发送请求时使用  |  -  |  -  |
+| api  | string |  接口，发送请求时使用  |  -  |  -  |
+| rowSelection  | Object |  表格复选配置  |  -  |  -  |
+| additionalParameters  | object |  请求数据的额外参数  |  -  |  -  |
+| dealReqDataFn  | function |  对请求数据进行自定义处理  |  -  |  -  |
+| successFn  | function |  请求成功的回调 & 对响应数据进行自定义处理  |  -  |  -  |
+| isPagination  | boolean |  是否分页  |  -  |  true  |
+| paginationInfo  | object |  分页信息，{current, pageSize}  |  -  |  {current: 1, pageSize: 10}  |
+
+
+## 方法
+| 参数 | 类型 | 含义 |
+| :------: | :-------: | :-------: |
+| search  | function   |  重新搜索  |
+
+
+## filterList
+
+| 参数 | 类型 | 含义 | 必填 | 默认值 |
+| :------: | :-------: | :-------: | :------: | :------: |
+| label  | string   |  标题  |  是  |  -  |
+| filterType  | string  |  类型（input/select/datePicker）  |  是  |  -  |
+| filterDataKey  | string | 查询时给后端的参数key |  是  |  -  |
+| value  | string/array |  初始参数，范围选择时传数组  |  -  |  -  |
+| placeholder  | string/array  |  无内容时的填充项，范围选择时传数组  |  -  |  -  |
+| options | array |  filterType为select时的可选项，{label, value}  |  -  |  -  |
+| picker | string |  filterType为datePicker时使用,日期组件可选范围（date/month/week/range）  |  -  |  date  |
+
+# HTScreen
+
+## 参数
+
+| 参数 | 类型 | 含义 | 必填 | 默认值 |
+| :------: | :-------: | :-------: | :------: | :------: |
+| filterList  | array |  筛选项，同HTTable  |  是  |  -  |
+| search  | function |  搜索项，(searchJson) => {} |  -  |  -  |
+
+## 方法
+| 参数 | 类型 | 含义 |
+| :------: | :-------: | :-------: |
+| search  | function   |  重新搜索  |

package/components/HTScreen/constant.js

@@ -0,0 +1 @@
+const fieldWhiteList=["placeholder","style","value","maxLength"];export const filterWhiteListData=t=>{const i={};Object.keys(t).map(e=>{if(fieldWhiteList.includes(e)){i[e]=t[e]}});return i};export const PICKER_ENUM={date:"DatePicker",month:"MonthPicker",week:"WeekPicker",range:"RangePicker"};

package/components/HTScreen/index.js

@@ -0,0 +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()},"查询")))});

package/components/HTScreen/index.less

@@ -0,0 +1 @@
+.HT-screen-components{display:flex;box-sizing:border-box;padding:30px 20px;.screen-list{flex:1;display:flex;align-items:center;flex-wrap:wrap;.screen-item{display:flex;align-items:center;margin-right:30px;margin-bottom:10px;.item-label{margin-right:10px;min-width:80px;text-align:right;}}.submit-btn{margin-bottom:10px;margin-right:10px;}.restting-btn{margin-bottom:10px;}}.screen-btn-group{width:70px;}}

package/components/HTScreen/render/renderDatePicker.js

@@ -0,0 +1 @@
+function _extends(){_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a){if(Object.prototype.hasOwnProperty.call(a,n)){e[n]=a[n]}}}return e};return _extends.apply(this,arguments)}import React,{useState}from"react";import{DatePicker}from"antd";import moment from"moment";import{filterWhiteListData,PICKER_ENUM}from"../constant";export default function RenderInput(n){const[r,l]=useState(n.originData||{});const e=PICKER_ENUM[r.picker||"date"];const t=e===PICKER_ENUM.date?DatePicker:DatePicker[e];if(!r.value){r.value=null}else if(r.dateValue){r.value=r.dateValue}else if(typeof r.value==="string"){r.value=moment(r.value)}else if(Array.isArray(r.value)){r.value=r.value.map(e=>e?moment(e):null)}const a=(e,t)=>{const a={...r};a.dateValue=e;a.value=t;l(a);n.componentValChange&&n.componentValChange(a)};return React.createElement(t,_extends({},filterWhiteListData(r),{allowClear:r.allowClear!==false,onChange:(e,t)=>a(e,t)}))}

package/components/HTScreen/render/renderInput.js

@@ -0,0 +1 @@
+function _extends(){_extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n){if(Object.prototype.hasOwnProperty.call(n,r)){t[r]=n[r]}}}return t};return _extends.apply(this,arguments)}import React,{useState}from"react";import{Input}from"antd";import{filterWhiteListData}from"../constant";export default function RenderInput(r){const[a,o]=useState(r.originData||{});const e=t=>{const e=t.currentTarget.value;const n={...a};n.value=e;o(n);r.componentValChange&&r.componentValChange(n)};return React.createElement(Input,_extends({},filterWhiteListData(a),{allowClear:a.allowClear!==false,onChange:t=>e(t),onPressEnter:()=>r.componentPressEnter&&r.componentPressEnter()}))}

package/components/HTScreen/render/renderSelect.js

@@ -0,0 +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)))}

package/components/HTTable/constant.js

@@ -0,0 +1 @@
+const mustKey=["columns","rowKey"];export function isMustInit(s){for(let e=0;e<mustKey.length;e++){if(!s[mustKey[e]]){throw new Error(`${mustKey[e]}不可为空`)}}if(s.isRequest!==false&&!s.api){throw new Error(`api不可为空`)}if(s.isRequest===false&&!s.columns){throw new Error(`columns不可为空`)}}

package/components/HTTable/index.js

@@ -0,0 +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}})))});

package/components/HTTable/index.less

@@ -0,0 +1 @@
+.HT-table-components{box-sizing:border-box;padding:0 20px;}

package/index.js

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

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "ht-components",
+  "version": "1.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "lxd",
+  "license": "ISC",
+  "dependencies": {
+    "gulp": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean": "^0.4.0",
+    "gulp-css-minify": "^0.9.2",
+    "gulp-uglify": "^3.0.2"
+  }
+}