@kdcloudjs/kdesign 1.0.2

package/es/transfer/list.js

@@ -0,0 +1,241 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import React, { useState, useContext } from 'react';
+import { omit } from '../_utils/omit';
+import Search from './search';
+import ConfigContext from '../config-provider/ConfigContext';
+import DefaultListBody, { OmitProps } from './list-body';
+import classNames from 'classnames';
+import Checkbox from '../checkbox';
+
+var defaultRender = function defaultRender() {
+  return null;
+};
+
+function isRenderResultPlainObject(result) {
+  return result && ! /*#__PURE__*/React.isValidElement(result) && Object.prototype.toString.call(result) === '[object Object]';
+}
+
+var TransferList = function TransferList(props) {
+  var _classNames;
+
+  var _useContext = useContext(ConfigContext),
+      locale = _useContext.locale;
+
+  var prefixCls = props.prefixCls,
+      dataSource = props.dataSource,
+      filterOption = props.filterOption,
+      handleFilter = props.handleFilter,
+      handleClear = props.handleClear,
+      _props$render = props.render,
+      render = _props$render === void 0 ? defaultRender : _props$render,
+      titleText = props.titleText,
+      checkedKeys = props.checkedKeys,
+      disabled = props.disabled,
+      showSearch = props.showSearch,
+      style = props.style,
+      renderList = props.renderList,
+      onItemSelectAll = props.onItemSelectAll,
+      noDataContent = props.noDataContent,
+      showSelectAll = props.showSelectAll,
+      pagination = props.pagination,
+      footer = props.footer,
+      showRemove = props.showRemove;
+  var transferLang = locale.getCompLangMsg({
+    componentName: 'Transfer'
+  });
+  var searchPlaceholder = transferLang.searchPlaceholder;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      filterValue = _useState2[0],
+      setFilterValue = _useState2[1]; // 自定义底部渲染
+
+
+  var footerDom = footer && footer(props);
+
+  var renderItem = function renderItem(item) {
+    var renderResult = render(item);
+    var isRenderResultPlain = isRenderResultPlainObject(renderResult);
+    return {
+      renderedText: isRenderResultPlain ? renderResult.value : renderResult,
+      renderedEl: isRenderResultPlain ? renderResult.label : renderResult,
+      item: item
+    };
+  };
+
+  var getFilteredItems = function getFilteredItems(dataSource, filterValue) {
+    var filteredItems = [];
+    var filteredRenderItems = [];
+    dataSource.forEach(function (item) {
+      var renderedItem = renderItem(item);
+      var renderedText = renderedItem.renderedText; // Filter skip
+
+      if (filterValue && !matchFilter(renderedText, item)) {
+        return null;
+      }
+
+      filteredItems.push(item);
+      filteredRenderItems.push(renderedItem);
+    });
+    return {
+      filteredItems: filteredItems,
+      filteredRenderItems: filteredRenderItems
+    };
+  };
+
+  var onFilterChange = function onFilterChange(e) {
+    var filterStr = e.target.value;
+    setFilterValue(filterStr);
+    handleFilter(e);
+  };
+
+  var onClear = function onClear() {
+    setFilterValue('');
+    handleClear();
+  };
+
+  var matchFilter = function matchFilter(text, item) {
+    if (filterOption) {
+      return filterOption(filterValue, item);
+    }
+
+    return text.indexOf(filterValue) > -1;
+  };
+
+  var renderListBody = function renderListBody(renderList, props) {
+    var bodyContent = renderList ? renderList(props) : null;
+    var customize = !!bodyContent;
+
+    if (!customize) {
+      bodyContent = /*#__PURE__*/React.createElement(DefaultListBody, _extends({}, props));
+    }
+
+    return {
+      customize: customize,
+      bodyContent: bodyContent
+    };
+  };
+
+  var getListBody = function getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
+    var _context;
+
+    var search = showSearch ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-body-search-wrapper")
+    }, /*#__PURE__*/React.createElement(Search, {
+      prefixCls: "".concat(prefixCls, "-search"),
+      onChange: onFilterChange,
+      handleClear: onClear,
+      placeholder: searchPlaceholder,
+      value: filterValue,
+      disabled: disabled
+    })) : null;
+
+    var _renderListBody = renderListBody(renderList, _extends(_extends({}, omit(props, OmitProps)), {
+      filteredItems: filteredItems,
+      filteredRenderItems: filteredRenderItems,
+      selectedKeys: checkedKeys
+    })),
+        bodyContent = _renderListBody.bodyContent,
+        customize = _renderListBody.customize;
+
+    var bodyNode; // We should wrap customize list body in a classNamed div to use flex layout.
+
+    if (customize) {
+      bodyNode = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-body-customize-wrapper")
+      }, bodyContent);
+    } else {
+      bodyNode = filteredItems.length ? bodyContent : /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-body-not-found")
+      }, noDataContent);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(showSearch ? _concatInstanceProperty(_context = "".concat(prefixCls, "-body ")).call(_context, prefixCls, "-body-with-search") : "".concat(prefixCls, "-body"))
+    }, search, bodyNode);
+  };
+
+  var getSelectAllLabel = function getSelectAllLabel(selectedCount, totalCount) {
+    var _context2;
+
+    if (showRemove) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, "".concat(totalCount));
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _concatInstanceProperty(_context2 = "(".concat(selectedCount, "/")).call(_context2, totalCount, ")"));
+  };
+
+  var getCheckStatus = function getCheckStatus(filteredItems) {
+    if (checkedKeys.length === 0) {
+      return 'none';
+    }
+
+    if (filteredItems.every(function (item) {
+      return checkedKeys.indexOf(item.key) >= 0 || !!item.disabled;
+    })) {
+      return 'all';
+    }
+
+    return 'part';
+  };
+
+  var getCheckBox = function getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled) {
+    var checkStatus = getCheckStatus(filteredItems);
+    var checkedAll = checkStatus === 'all';
+    var checkAllCheckbox = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-header-select-all")
+    }, showSelectAll !== false && /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: disabled,
+      checked: checkedAll,
+      indeterminate: checkStatus === 'part',
+      onChange: function onChange() {
+        var _context3;
+
+        // Only select enabled items
+        onItemSelectAll(_mapInstanceProperty(_context3 = _filterInstanceProperty(filteredItems).call(filteredItems, function (item) {
+          return !item.disabled;
+        })).call(_context3, function (_ref) {
+          var key = _ref.key;
+          return key;
+        }), !checkedAll);
+      }
+    }));
+    return checkAllCheckbox;
+  };
+
+  var listFooter = footerDom ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-footer")
+  }, footerDom) : null;
+
+  var _getFilteredItems = getFilteredItems(dataSource, filterValue),
+      filteredItems = _getFilteredItems.filteredItems,
+      filteredRenderItems = _getFilteredItems.filteredRenderItems;
+
+  var checkAllCheckbox = !showRemove && !pagination && getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled);
+  var listBody = getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, noDataContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
+  var listCls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-with-pagination"), pagination), _defineProperty(_classNames, "".concat(prefixCls, "-with-footer"), footerDom), _classNames));
+  return /*#__PURE__*/React.createElement("div", {
+    className: listCls,
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-header")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-header-left")
+  }, checkAllCheckbox, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-header-title")
+  }, titleText)), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-header-selected")
+  }, getSelectAllLabel(checkedKeys.length, filteredItems.length))), listBody, listFooter);
+};
+
+TransferList.defaultProps = {
+  dataSource: [],
+  titleText: '',
+  showSearch: false
+};
+export default TransferList;

package/es/transfer/operation.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface TransferOperationProps {
+    className?: string;
+    leftArrowText?: string;
+    rightArrowText?: string;
+    moveToLeft?: React.MouseEventHandler<HTMLButtonElement>;
+    moveToRight?: React.MouseEventHandler<HTMLButtonElement>;
+    leftActive?: boolean;
+    rightActive?: boolean;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    direction?: 'ltr' | 'rtl';
+    oneWay?: boolean;
+}
+declare const Operation: ({ disabled, moveToLeft, moveToRight, leftArrowText, rightArrowText, leftActive, rightActive, className, style, direction, oneWay, }: TransferOperationProps) => JSX.Element;
+export default Operation;

package/es/transfer/operation.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Button from '../button';
+import Icon from '../icon';
+
+var Operation = function Operation(_ref) {
+  var disabled = _ref.disabled,
+      moveToLeft = _ref.moveToLeft,
+      moveToRight = _ref.moveToRight,
+      _ref$leftArrowText = _ref.leftArrowText,
+      leftArrowText = _ref$leftArrowText === void 0 ? '' : _ref$leftArrowText,
+      _ref$rightArrowText = _ref.rightArrowText,
+      rightArrowText = _ref$rightArrowText === void 0 ? '' : _ref$rightArrowText,
+      leftActive = _ref.leftActive,
+      rightActive = _ref.rightActive,
+      className = _ref.className,
+      style = _ref.style,
+      direction = _ref.direction,
+      oneWay = _ref.oneWay;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "small",
+    disabled: disabled || !rightActive,
+    onClick: moveToRight,
+    icon: direction !== 'rtl' ? /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-right"
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-left"
+    })
+  }, rightArrowText), !oneWay && /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "small",
+    disabled: disabled || !leftActive,
+    onClick: moveToLeft,
+    icon: direction !== 'rtl' ? /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-left"
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-right"
+    })
+  }, leftArrowText));
+};
+
+export default Operation;

package/es/transfer/search.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface TransferSearchProps {
+    prefixCls?: string;
+    placeholder?: string;
+    onChange?: (e: React.FormEvent<HTMLElement>) => void;
+    handleClear?: (e: React.MouseEvent<HTMLElement>) => void;
+    value?: string;
+    disabled?: boolean;
+}
+declare const transferSearch: React.FC<TransferSearchProps>;
+export default transferSearch;

package/es/transfer/search.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Input from '../input';
+import Icon from '../icon';
+
+var transferSearch = function transferSearch(props) {
+  var prefixCls = props.prefixCls,
+      placeholder = props.placeholder,
+      onChange = props.onChange,
+      handleClear = props.handleClear,
+      value = props.value,
+      disabled = props.disabled;
+
+  var handleChange = function handleChange(e) {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  var handleClearFn = function handleClearFn(e) {
+    e.preventDefault();
+
+    if (!disabled && handleClear) {
+      handleClear(e);
+    }
+  };
+
+  var prefixIcon = /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-prefix")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "search"
+  }));
+  var suffixIcon = value && value.length > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-suffix"),
+    onClick: handleClearFn
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "close-solid"
+  })) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+    borderType: "bordered",
+    placeholder: placeholder,
+    className: prefixCls,
+    value: value,
+    onChange: handleChange,
+    disabled: disabled,
+    prefix: prefixIcon,
+    suffix: suffixIcon
+  }));
+};
+
+transferSearch.defaultProps = {
+  placeholder: ''
+};
+export default transferSearch;

package/es/transfer/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';