@aliretail/react-link-selector/es/micro-page/index.js

x

import _Pagination from "@alifd/next/es/pagination";
import _Checkbox from "@alifd/next/es/checkbox";
import _Search from "@alifd/next/es/search";
import React, { useState, useEffect } from 'react';
import request from '@aliretail/react-universal-request';
import API from '../api';
import './index.scss';
var PAGESIZE = 20;
export default function MicroPage(props) {
  var _useState = useState([]),
      data = _useState[0],
      setData = _useState[1];

  var _useState2 = useState(0),
      start = _useState2[0],
      setStart = _useState2[1];

  var _useState3 = useState(''),
      searchKeyword = _useState3[0],
      setSearchKeyword = _useState3[1];

  var _useState4 = useState(props.value),
      value = _useState4[0],
      setValue = _useState4[1];

  var _useState5 = useState(0),
      total = _useState5[0],
      setTotal = _useState5[1];

  var queryData = function queryData() {
    request({
      url: API.microPage,
      method: 'POST',
      data: {
        start: start,
        limit: PAGESIZE,
        pageName: searchKeyword
      }
    }).then(function (json) {
      setTotal(json.result.totalElements);
      setData(json.result.content); // Message.success("保存成功");
    });
  };

  useEffect(function () {
    queryData();
  }, []);
  /** 检索当前页面组件 */

  var search = function search(keyword) {
    setSearchKeyword(keyword);
  };

  var onSelectMicroPage = function onSelectMicroPage(item) {
    setValue([item]);
    props.onSelect({
      type: 'microPage',
      result: [item]
    });
  };

  useEffect(function () {
    queryData();
  }, [start, searchKeyword]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Search, {
    style: {
      margin: '10px 0'
    },
    shape: "simple",
    onSearch: search,
    placeholder: "\u901A\u8FC7\u9875\u9762\u540D\u79F0\u641C\u7D22"
  }), /*#__PURE__*/React.createElement("div", {
    className: "micro-page-list"
  }, data.map(function (page) {
    var selected = value.length && page.id === value[0].id;
    return /*#__PURE__*/React.createElement("div", {
      className: "micro-page-item " + (selected ? 'micro-page-item-checked' : ''),
      key: page.id,
      onClick: function onClick() {
        return onSelectMicroPage(page);
      }
    }, selected ? /*#__PURE__*/React.createElement(_Checkbox, {
      className: "checkbox",
      checked: true
    }) : null, /*#__PURE__*/React.createElement("div", {
      className: "img"
    }, /*#__PURE__*/React.createElement("img", {
      src: page.previewUrl
    })), /*#__PURE__*/React.createElement("div", {
      className: "title"
    }, page.pageName));
  })), /*#__PURE__*/React.createElement(_Pagination, {
    total: total,
    pageSize: PAGESIZE,
    hideOnlyOnePage: true,
    current: Math.floor(start / PAGESIZE) + 1,
    onChange: function onChange(n) {
      setStart((n - 1) * PAGESIZE);
    },
    shape: "arrow-only",
    pageShowCount: 5,
    style: {
      marginTop: '16px',
      "float": 'right'
    },
    showJump: false
  }));
}