@cqsjjb/jjb-react-admin-component 3.0.0 → 3.0.1

package/ControlWrapper/index.d.ts

@@ -0,0 +1,74 @@
+// @ts-ignore
+import * as React from 'react';
+// @ts-ignore
+import { Moment } from 'moment';
+// @ts-ignore
+import { DefaultOptionType, FieldNamesType } from 'antd/es/cascader';
+import { ComponentProps } from '../types';
+
+interface BaseProps<T> extends ComponentProps {
+  // 输入内容
+  value?: T;
+  // 标签
+  label?: string;
+  // 标签宽度
+  labelSpan?: number;
+  // 内容清空
+  allowClear?: boolean;
+  // 占位符
+  placeholder?: string;
+  // 输出事件
+  onChange?: (value: T) => void;
+}
+
+interface InputProps<T> extends BaseProps<T> {
+  // 文本长度
+  maxLength?: number;
+}
+
+interface SelectProps<T> extends BaseProps<T> {
+  // 设置 Select 的模式为多选或标签
+  mode?: 'multiple' | 'tags';
+  // 最多显示多少个tag
+  maxTagCount?: number;
+}
+
+interface CascaderProps<T> extends BaseProps<T> {
+  // 可选项数据源
+  options?: DefaultOptionType[];
+  // 支持多选节点
+  multiple?: boolean;
+  // 自定义 options 中 label value children 的字段
+  fieldNames?: FieldNamesType;
+  // 最多显示多少个tag
+  maxTagCount?: number;
+  // 定义选中项回填的方式
+  showCheckedStrategy?: 'SHOW_CHILD' | 'SHOW_PARENT';
+}
+
+interface DatePickerProps<T> {
+  // 标签
+  label?: string;
+  // 输入
+  value?: T;
+  // 格式日期
+  format?: string;
+  // 输出事件
+  onChange?: (value: T) => void;
+}
+
+declare const ControlWrapper: {
+  // 输入
+  Input: React.FC<InputProps<string | number>>;
+  // 选择
+  Select: React.FC<SelectProps<string | number>>;
+  // 级联选择
+  Cascader: React.FC<CascaderProps<string[] | number[]>>;
+  // 日期选择
+  DatePicker: React.FC<DatePickerProps<Moment>> & {
+    // 日期范围选择
+    RangePicker: React.FC<DatePickerProps<Moment[]>>
+  };
+};
+
+export default ControlWrapper;

package/ControlWrapper/index.js

@@ -0,0 +1,274 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Cascader as OriginCascader, Col, DatePicker as OriginDatePicker, Input as OriginInput, Row, Select as OriginSelect, TreeSelect as OriginTreeSelect } from 'antd';
+import './index.less';
+const prefixCls = process?.env?.app?.antd['ant-prefix'] || 'ant';
+
+/**
+ * @param classList {string[]}
+ * @return {string}
+ */
+function classnames(classList) {
+  return classList.filter(i => i).join(' ');
+}
+function algorithm() {
+  const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
+  return value ? value === '#FFF' ? 'default' : 'dark' : 'default';
+}
+class Input extends React.Component {
+  get algorithm() {
+    return algorithm();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+    }, /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      wrap: false
+    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
+      span: this.props.labelSpan,
+      className: `${prefixCls}-form-item-control-label-span`
+    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(OriginInput, {
+      style: {
+        width: '100%',
+        borderLeft: 'none'
+      },
+      value: this.props.value,
+      maxLength: this.props.maxLength,
+      allowClear: this.props.allowClear,
+      placeholder: this.props.placeholder,
+      onChange: e => this.props.onChange(e.target.value || undefined)
+    }))));
+  }
+}
+Input.propTypes = {
+  value: PropTypes.any,
+  label: PropTypes.string,
+  labelSpan: PropTypes.number,
+  maxLength: PropTypes.number,
+  allowClear: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+class Select extends React.Component {
+  get algorithm() {
+    return algorithm();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+    }, /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      wrap: false
+    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
+      span: this.props.labelSpan,
+      className: `${prefixCls}-form-item-control-label-span`
+    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(OriginSelect, {
+      mode: this.props.mode,
+      style: {
+        width: '100%',
+        borderLeft: 'none'
+      },
+      value: this.props.value,
+      allowClear: this.props.allowClear,
+      maxTagCount: this.props.maxTagCount || 3,
+      placeholder: this.props.placeholder,
+      onChange: value => this.props.onChange(value || undefined)
+    }, this.props.options ? this.props.options : this.props.children))));
+  }
+}
+Select.propTypes = {
+  mode: PropTypes.string,
+  value: PropTypes.any,
+  label: PropTypes.string,
+  labelSpan: PropTypes.number,
+  allowClear: PropTypes.bool,
+  maxTagCount: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+class Cascader extends React.Component {
+  get algorithm() {
+    return algorithm();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+    }, /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      wrap: false
+    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
+      span: this.props.labelSpan,
+      className: `${prefixCls}-form-item-control-label-span`
+    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(OriginCascader, {
+      style: {
+        width: '100%',
+        borderLeft: 'none'
+      },
+      value: this.props.value,
+      options: this.props.options,
+      multiple: this.props.multiple,
+      allowClear: this.props.allowClear,
+      fieldNames: this.props.fieldNames,
+      maxTagCount: this.props.maxTagCount || 3,
+      placeholder: this.props.placeholder,
+      showCheckedStrategy: this.props.showCheckedStrategy,
+      onChange: value => this.props.onChange(value || undefined)
+    }))));
+  }
+}
+Cascader.propTypes = {
+  mode: PropTypes.string,
+  value: PropTypes.any,
+  label: PropTypes.string,
+  options: PropTypes.array,
+  multiple: PropTypes.bool,
+  labelSpan: PropTypes.number,
+  allowClear: PropTypes.bool,
+  fieldNames: PropTypes.object,
+  maxTagCount: PropTypes.number,
+  placeholder: PropTypes.string,
+  showCheckedStrategy: PropTypes.string,
+  onChange: PropTypes.func
+};
+class RangePicker extends React.Component {
+  get algorithm() {
+    return algorithm();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+    }, /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      wrap: false
+    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
+      span: this.props.labelSpan,
+      className: `${prefixCls}-form-item-control-label-span`
+    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(OriginDatePicker.RangePicker, {
+      style: {
+        width: '100%',
+        borderLeft: 'none'
+      },
+      value: this.props.value,
+      format: this.props.format,
+      showTime: this.props.showTime || undefined,
+      placeholder: this.props.placeholder,
+      onChange: value => this.props.onChange(value || undefined)
+    }))));
+  }
+}
+RangePicker.propTypes = {
+  value: PropTypes.any,
+  label: PropTypes.string,
+  format: PropTypes.string,
+  labelSpan: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+class DatePicker extends React.Component {
+  static RangePicker = RangePicker;
+  get algorithm() {
+    return algorithm();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+    }, /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      wrap: false
+    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
+      span: this.props.labelSpan,
+      className: `${prefixCls}-form-item-control-label-span`
+    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(OriginDatePicker, {
+      style: {
+        width: '100%',
+        borderLeft: 'none'
+      },
+      value: this.props.value,
+      format: this.props.format,
+      picker: this.props.picker || undefined,
+      showTime: this.props.showTime || undefined,
+      placeholder: this.props.placeholder,
+      onChange: value => this.props.onChange(value || undefined)
+    }))));
+  }
+}
+DatePicker.propTypes = {
+  value: PropTypes.any,
+  label: PropTypes.string,
+  format: PropTypes.string,
+  labelSpan: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+class TreeSelect extends React.Component {
+  get algorithm() {
+    return algorithm();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: classnames([`${prefixCls}-form-item-control-label-wrapper`, `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`, this.props.label && `${prefixCls}-form-item-control-label-has`])
+    }, /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      wrap: false
+    }, this.props.label && /*#__PURE__*/React.createElement(Col, {
+      span: this.props.labelSpan,
+      className: `${prefixCls}-form-item-control-label-span`
+    }, this.props.label), /*#__PURE__*/React.createElement(Col, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(OriginTreeSelect, {
+      showSearch: true,
+      allowClear: true,
+      style: {
+        width: '100%',
+        borderLeft: 'none'
+      },
+      treeData: this.props.treeData,
+      fieldNames: this.props.fieldNames,
+      dropdownStyle: this.props.dropdownStyle,
+      maxTagCount: 2,
+      value: this.props.value,
+      placeholder: this.props.placeholder ? this.props.placeholder : '请选择分类',
+      defaultValue: this.props.defaultValue ? this.props.defaultValue : undefined,
+      treeCheckable: this.props.checkbox,
+      treeNodeFilterProp: "title",
+      showCheckedStrategy: OriginTreeSelect.SHOW_PARENT,
+      onChange: value => this.props.onChange(value)
+    }))));
+  }
+}
+TreeSelect.propTypes = {
+  label: PropTypes.string,
+  checkbox: PropTypes.bool,
+  treeData: PropTypes.array,
+  labelSpan: PropTypes.number,
+  fieldNames: PropTypes.object,
+  defaultValue: PropTypes.array,
+  dropdownStyle: PropTypes.object,
+  onChange: PropTypes.func
+};
+export default {
+  Input,
+  Select,
+  Cascader,
+  DatePicker,
+  TreeSelect
+};

package/ControlWrapper/index.less

@@ -0,0 +1,34 @@
+@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
+
+.@{com-prefix-cls}-form-item-control-label-wrapper {
+  .@{com-prefix-cls}-form-item-control-label-span {
+    border: 1px solid #d9d9d9;
+    height: 32px;
+    line-height: 30px;
+    box-sizing: border-box;
+    margin-right: -1px;
+    padding: 0 8px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    white-space: nowrap;
+  }
+
+  &.@{com-prefix-cls}-form-item-control-label-has {
+    .@{com-prefix-cls}-select-selector, .@{com-prefix-cls}-picker, .@{com-prefix-cls}-input, .@{com-prefix-cls}-input-affix-wrapper {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &-default {
+    .@{com-prefix-cls}-form-item-control-label-span {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-dark {
+    .@{com-prefix-cls}-form-item-control-label-span {
+      border-color: #424242;
+    }
+  }
+}

package/ControlWrapper/index.mjs

@@ -0,0 +1,405 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Cascader as OriginCascader,
+  Col,
+  DatePicker as OriginDatePicker,
+  Input as OriginInput,
+  Row,
+  Select as OriginSelect,
+  TreeSelect as OriginTreeSelect
+} from 'antd';
+import './index.less';
+
+const prefixCls = process?.env?.app?.antd[ 'ant-prefix' ] || 'ant';
+
+/**
+ * @param classList {string[]}
+ * @return {string}
+ */
+function classnames (classList) {
+  return classList.filter(i => i).join(' ');
+}
+
+function algorithm () {
+  const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
+  return value
+    ? value === '#FFF'
+      ? 'default'
+      : 'dark'
+    : 'default';
+}
+
+class Input extends React.Component {
+  get algorithm () {
+    return algorithm();
+  }
+
+  render () {
+    return (
+      <div
+        style={this.props.style}
+        className={classnames([
+          `${prefixCls}-form-item-control-label-wrapper`,
+          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
+          this.props.label && `${prefixCls}-form-item-control-label-has`
+        ])}
+      >
+        <Row
+          align="middle"
+          wrap={false}
+        >
+          {this.props.label && (
+            <Col
+              span={this.props.labelSpan}
+              className={`${prefixCls}-form-item-control-label-span`}
+            >
+              {this.props.label}
+            </Col>
+          )}
+          <Col flex={1}>
+            <OriginInput
+              style={{
+                width: '100%',
+                borderLeft: 'none'
+              }}
+              value={this.props.value}
+              maxLength={this.props.maxLength}
+              allowClear={this.props.allowClear}
+              placeholder={this.props.placeholder}
+              onChange={e => this.props.onChange(e.target.value || undefined)}
+            />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+Input.propTypes = {
+  value: PropTypes.any,
+  label: PropTypes.string,
+  labelSpan: PropTypes.number,
+  maxLength: PropTypes.number,
+  allowClear: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+class Select extends React.Component {
+  get algorithm () {
+    return algorithm();
+  }
+
+  render () {
+    return (
+      <div
+        style={this.props.style}
+        className={classnames([
+          `${prefixCls}-form-item-control-label-wrapper`,
+          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
+          this.props.label && `${prefixCls}-form-item-control-label-has`
+        ])}
+      >
+        <Row
+          align="middle"
+          wrap={false}
+        >
+          {this.props.label && (
+            <Col
+              span={this.props.labelSpan}
+              className={`${prefixCls}-form-item-control-label-span`}
+            >
+              {this.props.label}
+            </Col>
+          )}
+          <Col flex={1}>
+            <OriginSelect
+              mode={this.props.mode}
+              style={{
+                width: '100%',
+                borderLeft: 'none'
+              }}
+              value={this.props.value}
+              allowClear={this.props.allowClear}
+              maxTagCount={this.props.maxTagCount || 3}
+              placeholder={this.props.placeholder}
+              onChange={value => this.props.onChange(value || undefined)}
+            >
+              {this.props.options
+                ? this.props.options
+                : this.props.children}
+            </OriginSelect>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+Select.propTypes = {
+  mode: PropTypes.string,
+  value: PropTypes.any,
+  label: PropTypes.string,
+  labelSpan: PropTypes.number,
+  allowClear: PropTypes.bool,
+  maxTagCount: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+class Cascader extends React.Component {
+  get algorithm () {
+    return algorithm();
+  }
+
+  render () {
+    return (
+      <div
+        style={this.props.style}
+        className={classnames([
+          `${prefixCls}-form-item-control-label-wrapper`,
+          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
+          this.props.label && `${prefixCls}-form-item-control-label-has`
+        ])}
+      >
+        <Row
+          align="middle"
+          wrap={false}
+        >
+          {this.props.label && (
+            <Col
+              span={this.props.labelSpan}
+              className={`${prefixCls}-form-item-control-label-span`}
+            >
+              {this.props.label}
+            </Col>
+          )}
+          <Col flex={1}>
+            <OriginCascader
+              style={{
+                width: '100%',
+                borderLeft: 'none'
+              }}
+              value={this.props.value}
+              options={this.props.options}
+              multiple={this.props.multiple}
+              allowClear={this.props.allowClear}
+              fieldNames={this.props.fieldNames}
+              maxTagCount={this.props.maxTagCount || 3}
+              placeholder={this.props.placeholder}
+              showCheckedStrategy={this.props.showCheckedStrategy}
+              onChange={value => this.props.onChange(value || undefined)}
+            />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+Cascader.propTypes = {
+  mode: PropTypes.string,
+  value: PropTypes.any,
+  label: PropTypes.string,
+  options: PropTypes.array,
+  multiple: PropTypes.bool,
+  labelSpan: PropTypes.number,
+  allowClear: PropTypes.bool,
+  fieldNames: PropTypes.object,
+  maxTagCount: PropTypes.number,
+  placeholder: PropTypes.string,
+  showCheckedStrategy: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+
+class RangePicker extends React.Component {
+  get algorithm () {
+    return algorithm();
+  }
+
+  render () {
+    return (
+      <div
+        style={this.props.style}
+        className={classnames([
+          `${prefixCls}-form-item-control-label-wrapper`,
+          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
+          this.props.label && `${prefixCls}-form-item-control-label-has`
+        ])}
+      >
+        <Row
+          align="middle"
+          wrap={false}
+        >
+          {this.props.label && (
+            <Col
+              span={this.props.labelSpan}
+              className={`${prefixCls}-form-item-control-label-span`}
+            >
+              {this.props.label}
+            </Col>
+          )}
+          <Col style={{ flex: 1 }}>
+            <OriginDatePicker.RangePicker
+              style={{
+                width: '100%',
+                borderLeft: 'none'
+              }}
+              value={this.props.value}
+              format={this.props.format}
+              showTime={this.props.showTime || undefined}
+              placeholder={this.props.placeholder}
+              onChange={value => this.props.onChange(value || undefined)}
+            />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+RangePicker.propTypes = {
+  value: PropTypes.any,
+  label: PropTypes.string,
+  format: PropTypes.string,
+  labelSpan: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+class DatePicker extends React.Component {
+  static RangePicker = RangePicker;
+
+  get algorithm () {
+    return algorithm();
+  }
+
+  render () {
+    return (
+      <div
+        style={this.props.style}
+        className={classnames([
+          `${prefixCls}-form-item-control-label-wrapper`,
+          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
+          this.props.label && `${prefixCls}-form-item-control-label-has`
+        ])}
+      >
+        <Row
+          align="middle"
+          wrap={false}
+        >
+          {this.props.label && (
+            <Col
+              span={this.props.labelSpan}
+              className={`${prefixCls}-form-item-control-label-span`}
+            >
+              {this.props.label}
+            </Col>
+          )}
+          <Col flex={1}>
+            <OriginDatePicker
+              style={{
+                width: '100%',
+                borderLeft: 'none'
+              }}
+              value={this.props.value}
+              format={this.props.format}
+              picker={this.props.picker || undefined}
+              showTime={this.props.showTime || undefined}
+              placeholder={this.props.placeholder}
+              onChange={value => this.props.onChange(value || undefined)}
+            />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+DatePicker.propTypes = {
+  value: PropTypes.any,
+  label: PropTypes.string,
+  format: PropTypes.string,
+  labelSpan: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+class TreeSelect extends React.Component {
+  get algorithm () {
+    return algorithm();
+  }
+
+  render () {
+    return (
+      <div
+        style={this.props.style}
+        className={classnames([
+          `${prefixCls}-form-item-control-label-wrapper`,
+          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
+          this.props.label && `${prefixCls}-form-item-control-label-has`
+        ])}
+      >
+        <Row
+          align="middle"
+          wrap={false}
+        >
+          {this.props.label && (
+            <Col
+              span={this.props.labelSpan}
+              className={`${prefixCls}-form-item-control-label-span`}
+            >
+              {this.props.label}
+            </Col>
+          )}
+          <Col flex={1}>
+            <OriginTreeSelect
+              showSearch
+              allowClear
+              style={{
+                width: '100%',
+                borderLeft: 'none'
+              }}
+              treeData={this.props.treeData}
+              fieldNames={this.props.fieldNames}
+              dropdownStyle={this.props.dropdownStyle}
+              maxTagCount={2}
+              value={this.props.value}
+              placeholder={this.props.placeholder
+                ? this.props.placeholder
+                : '请选择分类'}
+              defaultValue={this.props.defaultValue
+                ? this.props.defaultValue
+                : undefined}
+              treeCheckable={this.props.checkbox}
+              treeNodeFilterProp="title"
+              showCheckedStrategy={OriginTreeSelect.SHOW_PARENT}
+              onChange={value => this.props.onChange(value)}
+            />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+TreeSelect.propTypes = {
+  label: PropTypes.string,
+  checkbox: PropTypes.bool,
+  treeData: PropTypes.array,
+  labelSpan: PropTypes.number,
+  fieldNames: PropTypes.object,
+  defaultValue: PropTypes.array,
+  dropdownStyle: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default {
+  Input,
+  Select,
+  Cascader,
+  DatePicker,
+  TreeSelect
+};

package/SearchForm/index.d.ts

@@ -0,0 +1,40 @@
+// @ts-ignore
+import * as React from 'react';
+import { ComponentProps } from '../types';
+
+interface searchFormProps extends ComponentProps {
+  /**
+   * @description 样式
+   */
+  style?: React.CSSProperties,
+  /**
+   * @description 是否显示展开按钮
+   */
+  expand?: boolean;
+  /**
+   * @description 每行列数，默认3
+   */
+  colSize?: boolean;
+  /**
+   * @description 表单内容列表 [<Form.Item>...</Form.Item>,...]
+   */
+  formLine: Array<React.ReactNode>;
+  /**
+   * @description 组件挂载完成 通过事件返回form实例
+   */
+  onRef?: (ref: React.Ref<any>) => void;
+  /**
+   * @description 搜索 按钮触发，返回表单字段
+   */
+  onFinish?: (values: { [ p: string ]: any }) => void;
+  /**
+   * @description 重置 按钮触发
+   */
+  onReset?: () => void;
+}
+
+interface searchFormFc extends React.FC<searchFormProps> {
+}
+
+declare const searchForm: searchFormFc;
+export default searchForm;

package/SearchForm/index.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button, Space, Row, Col } from 'antd';
+import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
+import './index.less';
+class searchForm extends React.Component {
+  form = /*#__PURE__*/React.createRef();
+  state = {
+    isOpen: false
+  };
+  getButtons() {
+    const {
+      expand,
+      formLine,
+      colSize,
+      onReset
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
+      htmlType: "submit"
+    }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
+      icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
+      onClick: () => onReset()
+    }, "\u91CD\u7F6E"), expand && formLine.length / colSize > 1 && /*#__PURE__*/React.createElement(Button, {
+      icon: /*#__PURE__*/React.createElement(DoubleRightOutlined, {
+        style: {
+          transform: this.state.isOpen ? 'rotate(-90deg)' : 'rotate(90deg)'
+        }
+      }),
+      onClick: () => this.setState({
+        isOpen: !this.state.isOpen
+      })
+    }, this.state.isOpen ? '收起' : '展开'));
+  }
+  groupsList() {
+    if (this.props.expand && this.state.isOpen) {
+      return this.props.formLine;
+    }
+    return this.props.formLine.slice(0, this.props.colSize);
+  }
+  componentDidMount() {
+    if (this.props.onRef) {
+      this.props.onRef(this.form);
+    }
+  }
+  render() {
+    const {
+      colSize,
+      style,
+      onFinish
+    } = this.props;
+    const formItemList = this.groupsList();
+    return /*#__PURE__*/React.createElement(Form, {
+      ref: this.form,
+      style: style,
+      onFinish: values => onFinish(values)
+    }, /*#__PURE__*/React.createElement(Row, {
+      gutter: [16, 16]
+    }, formItemList.map((item, index) => /*#__PURE__*/React.createElement(Col, {
+      key: index,
+      span: 24 / colSize
+    }, item)), /*#__PURE__*/React.createElement(Col, {
+      span: 24 / colSize
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      noStyle: true
+    }, this.getButtons()))));
+  }
+}
+searchForm.defaultProps = {
+  style: {},
+  expand: false,
+  colSize: 3,
+  formLine: [],
+  onRef: () => {},
+  onReset: () => {},
+  onFinish: () => {}
+};
+searchForm.propTypes = {
+  style: PropTypes.object,
+  expand: PropTypes.bool,
+  colSize: PropTypes.number,
+  formLine: PropTypes.array,
+  onRef: PropTypes.func,
+  onReset: PropTypes.func,
+  onFinish: PropTypes.func
+};
+export default searchForm;

package/SearchForm/index.mjs

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button, Space, Row, Col } from 'antd';
+import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
+import './index.less';
+
+class searchForm extends React.Component {
+  form = React.createRef();
+  state = {
+    isOpen: false
+  };
+
+  getButtons () {
+    const {
+      expand,
+      formLine,
+      colSize,
+      onReset
+    } = this.props;
+    return (
+      <Space>
+        <Button
+          type="primary"
+          icon={<SearchOutlined />}
+          htmlType="submit"
+        >
+          查询
+        </Button>
+        <Button
+          icon={<UndoOutlined />}
+          onClick={() => onReset()}
+        >
+          重置
+        </Button>
+        {expand && formLine.length / colSize > 1 && (
+          <Button
+            icon={(
+              <DoubleRightOutlined
+                style={{
+                  transform: this.state.isOpen
+                    ? 'rotate(-90deg)'
+                    : 'rotate(90deg)'
+                }}
+              />
+            )}
+            onClick={() => this.setState({ isOpen: !this.state.isOpen })}
+          >
+            {this.state.isOpen
+              ? '收起'
+              : '展开'}
+          </Button>
+        )}
+      </Space>
+    );
+  }
+
+  groupsList () {
+    if (this.props.expand && this.state.isOpen) {
+      return this.props.formLine;
+    }
+    return this.props.formLine.slice(0, this.props.colSize);
+  }
+
+  componentDidMount () {
+    if (this.props.onRef) {
+      this.props.onRef(this.form);
+    }
+  }
+
+  render () {
+    const {
+      colSize,
+      style,
+      onFinish
+    } = this.props;
+    const formItemList = this.groupsList();
+    return (
+      <Form
+        ref={this.form}
+        style={style}
+        onFinish={values => onFinish(values)}
+      >
+        <Row gutter={[ 16, 16 ]}>
+          {formItemList.map((item, index) => (
+            <Col
+              key={index}
+              span={24 / colSize}
+            >
+              {item}
+            </Col>
+          ))}
+          <Col span={24 / colSize}>
+            <Form.Item noStyle>
+              {this.getButtons()}
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+}
+
+searchForm.defaultProps = {
+  style: {},
+  expand: false,
+  colSize: 3,
+  formLine: [],
+  onRef: () => {},
+  onReset: () => {},
+  onFinish: () => {},
+};
+searchForm.propTypes = {
+  style: PropTypes.object,
+  expand: PropTypes.bool,
+  colSize: PropTypes.number,
+  formLine: PropTypes.array,
+  onRef: PropTypes.func,
+  onReset: PropTypes.func,
+  onFinish: PropTypes.func,
+};
+export default searchForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",