@flatbiz/antd/dist/tree-modal/index.js

/* eslint-disable */
import './../button-operate/index.css';
import './../css-node-hover/index.css';
import './../dialog-confirm/index.css';
import './../fba-hooks/index.css';
import './../fba-utils/index.css';
import './../flex-layout/index.css';
import './../icon-wrapper/index.css';
import './../input-search-wrapper/index.css';
import './../request-status/index.css';
import './../text-overflow/index.css';
import './../tree-wrapper/index.css';
import './index.css';
/*! @flatjs/forge MIT @flatbiz/antd */

import { getUuid, toArray, treeToTiledMap, isUndefinedOrNull, attachPropertiesToComponent } from '@flatbiz/utils';
import { b as _objectSpread2, a as _slicedToArray } from '../_rollupPluginBabelHelpers-BspM60Sw.js';
import { Fragment, useMemo, useRef, useState, useEffect } from 'react';
import { useMemoizedFn, useSize } from 'ahooks';
import { Modal } from 'antd';
import { fbaHooks } from '../fba-hooks/index.js';
import { isObject } from '@dimjs/lang/is-object';
import { F as FlexLayout } from '../flex-layout-BGtMe7zr.js';
import _CloseOutlined from '@ant-design/icons/es/icons/CloseOutlined.js';
import { C as CssNodeHover } from '../css-node-hover-2asP-4iL.js';
import { I as IconWrapper } from '../icon-wrapper-DE97bI14.js';
import { T as TextOverflow } from '../text-overflow-B4NevAuv.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { TreeWrapper } from '../tree-wrapper/index.js';
import '../use-responsive-point-Bp3D3lZT.js';
import '@dimjs/utils/class-names/class-names';
import '@dimjs/lang/is-undefined';
import '@dimjs/lang/is-string';
import '@dimjs/lang/is-array';
import '@dimjs/model-react';
import '@dimjs/utils/array/array-remove';
import '@ant-design/icons/es/icons/CaretDownFilled.js';
import '@dimjs/utils/extend/extend';
import '@dimjs/utils/get/get';
import '@dimjs/model';
import '../button-operate-BLs4OaUe.js';
import '@ant-design/icons/es/icons/MoreOutlined.js';
import '@dimjs/lang/is-plain-object';
import '@dimjs/lang/is-promise';
import '../button-wrapper-BGjkUPpk.js';
import '@ant-design/icons/es/icons/LoadingOutlined.js';
import '../config-provider-wrapper-Bxh9JdL4.js';
import 'antd/es/locale/en_US.js';
import 'antd/es/locale/zh_CN.js';
import 'dayjs';
import 'dayjs/plugin/advancedFormat.js';
import 'dayjs/plugin/customParseFormat.js';
import 'dayjs/plugin/localeData.js';
import 'dayjs/plugin/utc.js';
import 'dayjs/plugin/weekday.js';
import 'dayjs/plugin/weekOfYear.js';
import 'dayjs/plugin/weekYear.js';
import '../fba-utils-CusZeveq.js';
import 'dayjs/locale/en.js';
import 'dayjs/locale/zh-cn.js';
import '../dropdown-menu-wrapper-DlstqgER.js';
import '@ant-design/icons/es/icons/ExclamationCircleFilled.js';
import '../dialog-confirm-CfR3Y2vA.js';
import '../dialog-modal-CGMNBSgq.js';
import 'react-dom/client';
import '../input-search-wrapper-Fw29CABR.js';
import '../request-status-Cjtei7Bl.js';
import '@dimjs/utils/tree/walk-through-tree';
import 'dequal';

var SelectItemList = function SelectItemList(props) {
  var checkedIdList = props.checkedIdList;
  return /*#__PURE__*/jsx(Fragment, {
    children: checkedIdList === null || checkedIdList === void 0 ? void 0 : checkedIdList.map(function (item) {
      var value = item.value;
      var label = item.label || value;
      return /*#__PURE__*/jsx(CssNodeHover, {
        style: {
          paddingLeft: 5,
          paddingRight: 0
        },
        children: /*#__PURE__*/jsxs(FlexLayout, {
          fullIndex: 1,
          direction: "horizontal",
          style: {
            alignItems: 'center',
            fontSize: 14,
            marginBottom: 0,
            color: '#505050'
          },
          children: [/*#__PURE__*/jsx(TextOverflow, {
            text: label
          }), /*#__PURE__*/jsx("div", {
            style: {
              position: 'relative',
              zIndex: 9,
              color: '#a1a1a1'
            },
            children: /*#__PURE__*/jsx(IconWrapper, {
              text: /*#__PURE__*/jsx(_CloseOutlined, {}),
              onClick: props.onDeleteItem.bind(null, value),
              size: "small",
              style: {
                paddingRight: 5,
                margin: '2px'
              }
            })
          })]
        })
      }, value);
    })
  });
};

var SelectContent = function SelectContent(props) {
  var _props$treeProps, _props$value;
  var modelKey = useMemo(function () {
    return "tree-select-modal-".concat(getUuid());
  }, []);
  return /*#__PURE__*/jsx(TreeWrapper, _objectSpread2(_objectSpread2({
    initRootExpand: true,
    showSearch: true,
    searchPlaceholder: "\u641C\u7D22",
    checkable: true,
    checkableType: "2"
  }, props.treeProps), {}, {
    showIcon: (_props$treeProps = props.treeProps) !== null && _props$treeProps !== void 0 && _props$treeProps.icon ? true : false,
    value: (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.map(function (item) {
      return item.value;
    }),
    modelKey: modelKey,
    fieldNames: props.fieldNames,
    labelInValue: true,
    serviceConfig: props.serviceConfig,
    onChange: function onChange(values) {
      var _props$onChange;
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, toArray(values));
    }
  }));
};

var HorizontalLayout = function HorizontalLayout(props) {
  var _props$fieldNames, _props$fieldNames2;
  var chenkedIdList = props.value || [];
  var valueKey = ((_props$fieldNames = props.fieldNames) === null || _props$fieldNames === void 0 ? void 0 : _props$fieldNames.value) || 'value';
  var childrenKey = ((_props$fieldNames2 = props.fieldNames) === null || _props$fieldNames2 === void 0 ? void 0 : _props$fieldNames2.children) || 'children';
  var _props$textConfig = props.textConfig,
    selectQuantityPrompt = _props$textConfig.selectQuantityPrompt,
    placeholder = _props$textConfig.placeholder;
  return /*#__PURE__*/jsxs(FlexLayout, {
    fullIndex: 0,
    direction: "horizontal",
    gap: 10,
    style: {
      height: '100%',
      overflow: 'hidden'
    },
    children: [/*#__PURE__*/jsx("div", {
      style: {
        backgroundColor: '#f4f4f4',
        padding: 10,
        borderRadius: 5
      },
      children: /*#__PURE__*/jsx(SelectContent, {
        treeProps: props.treeProps,
        value: chenkedIdList,
        onChange: props.onChange,
        fieldNames: props.fieldNames,
        serviceConfig: _objectSpread2(_objectSpread2({}, props.serviceConfig), {}, {
          onRequestResultAdapter: function onRequestResultAdapter(respData) {
            var _props$onChangeDataSo;
            var listMap = treeToTiledMap(respData, {
              value: valueKey,
              children: childrenKey
            });
            (_props$onChangeDataSo = props.onChangeDataSource) === null || _props$onChangeDataSo === void 0 || _props$onChangeDataSo.call(props, respData, listMap);
            return respData;
          }
        })
      })
    }), /*#__PURE__*/jsxs("div", {
      style: {
        width: '40%',
        overflow: 'hidden',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        flexShrink: 0
      },
      children: [/*#__PURE__*/jsx("div", {
        style: {
          fontSize: 15,
          fontWeight: '500',
          marginBottom: 10
        },
        children: chenkedIdList.length > 0 ? /*#__PURE__*/jsx(Fragment, {
          children: selectQuantityPrompt ? selectQuantityPrompt.replace('{total}', "".concat((chenkedIdList === null || chenkedIdList === void 0 ? void 0 : chenkedIdList.length) || '')) : "\u5DF2\u9009\u62E9".concat(chenkedIdList === null || chenkedIdList === void 0 ? void 0 : chenkedIdList.length)
        }) : placeholder || '请选择'
      }), /*#__PURE__*/jsx("div", {
        style: {
          overflow: 'auto',
          flex: 1
        },
        children: /*#__PURE__*/jsx(SelectItemList, {
          checkedIdList: chenkedIdList,
          fieldNames: props.fieldNames,
          onDeleteItem: props.onDeleteItem
        })
      })]
    })]
  });
};

var VerticalLayout = function VerticalLayout(props) {
  var _props$fieldNames, _props$fieldNames2;
  var _props$textConfig = props.textConfig,
    selectQuantityPrompt = _props$textConfig.selectQuantityPrompt,
    placeholder = _props$textConfig.placeholder;
  var valueKey = ((_props$fieldNames = props.fieldNames) === null || _props$fieldNames === void 0 ? void 0 : _props$fieldNames.value) || 'value';
  var childrenKey = ((_props$fieldNames2 = props.fieldNames) === null || _props$fieldNames2 === void 0 ? void 0 : _props$fieldNames2.children) || 'children';
  var chenkedIdList = props.value || [];
  return /*#__PURE__*/jsxs("div", {
    style: {
      height: '100%',
      overflow: 'auto'
    },
    children: [/*#__PURE__*/jsx("div", {
      style: {
        backgroundColor: '#f4f4f4',
        padding: 10,
        borderRadius: 5
      },
      children: /*#__PURE__*/jsx(SelectContent, {
        treeProps: props.treeProps,
        value: chenkedIdList,
        onChange: props.onChange,
        fieldNames: props.fieldNames,
        serviceConfig: _objectSpread2(_objectSpread2({}, props.serviceConfig), {}, {
          onRequestResultAdapter: function onRequestResultAdapter(respData) {
            var _props$onChangeDataSo;
            var listMap = treeToTiledMap(respData, {
              value: valueKey,
              children: childrenKey
            });
            (_props$onChangeDataSo = props.onChangeDataSource) === null || _props$onChangeDataSo === void 0 || _props$onChangeDataSo.call(props, respData, listMap);
            return respData;
          }
        })
      })
    }), /*#__PURE__*/jsxs("div", {
      style: {
        marginTop: 20
      },
      children: [/*#__PURE__*/jsx("div", {
        style: {
          fontSize: 15,
          fontWeight: '500',
          marginBottom: 10
        },
        children: chenkedIdList.length > 0 ? /*#__PURE__*/jsx(Fragment, {
          children: selectQuantityPrompt ? selectQuantityPrompt.replace('{total}', "".concat((chenkedIdList === null || chenkedIdList === void 0 ? void 0 : chenkedIdList.length) || '')) : "\u5DF2\u9009\u62E9".concat(chenkedIdList === null || chenkedIdList === void 0 ? void 0 : chenkedIdList.length)
        }) : placeholder
      }), /*#__PURE__*/jsx(SelectItemList, {
        checkedIdList: chenkedIdList,
        fieldNames: props.fieldNames,
        onDeleteItem: props.onDeleteItem
      })]
    })]
  });
};

var TreeModalContent = function TreeModalContent(props) {
  var _props$fieldNames, _props$fieldNames2;
  var isMultiple = props.isMultiple;
  var labelKey = ((_props$fieldNames = props.fieldNames) === null || _props$fieldNames === void 0 ? void 0 : _props$fieldNames.label) || 'label';
  var valueKey = ((_props$fieldNames2 = props.fieldNames) === null || _props$fieldNames2 === void 0 ? void 0 : _props$fieldNames2.value) || 'value';
  var dataSourceMapRef = useRef({});
  var screenType = fbaHooks.useResponsivePoint() || '';
  var direction = screenType === 'xs' ? 'vertical' : 'horizontal';
  var isMultipleFt = isUndefinedOrNull(isMultiple) ? true : isMultiple;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    values = _useState2[0],
    setValues = _useState2[1];
  var onDeleteItem = function onDeleteItem(value) {
    var _props$onChange;
    var targetList = values === null || values === void 0 ? void 0 : values.filter(function (item) {
      return item.value !== value;
    });
    setValues(targetList);
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, targetList);
  };
  fbaHooks.useEffectCustom(function () {
    var values = toArray(props.value).map(function (item) {
      var _dataSourceMapRef$cur;
      var target = isObject(item) ? item : {
        value: item
      };
      var value = target.value;
      return {
        value: value,
        label: ((_dataSourceMapRef$cur = dataSourceMapRef.current[value]) === null || _dataSourceMapRef$cur === void 0 ? void 0 : _dataSourceMapRef$cur[labelKey]) || ''
      };
    });
    setValues(values);
  }, [props.value]);
  var treePropsFt = _objectSpread2(_objectSpread2({}, props.treeProps), {}, {
    checkable: isMultipleFt ? true : false
  });
  var onChange = function onChange(values) {
    var _props$onChange2;
    setValues(values);
    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, values);
  };
  var onChangeDataSource = useMemoizedFn(function (treeDataList, mapData) {
    var _props$onDataSourceCh;
    dataSourceMapRef.current = mapData;
    var result = values === null || values === void 0 ? void 0 : values.map(function (item) {
      var target = mapData[item.value];
      return target ? {
        label: target[labelKey],
        value: target[valueKey]
      } : undefined;
    }).filter(Boolean);
    setValues(result);
    (_props$onDataSourceCh = props.onDataSourceChange) === null || _props$onDataSourceCh === void 0 || _props$onDataSourceCh.call(props, treeDataList, mapData);
  });
  return /*#__PURE__*/jsx(Fragment, {
    children: direction === 'vertical' ? /*#__PURE__*/jsx(VerticalLayout, {
      value: values,
      onDeleteItem: onDeleteItem,
      fieldNames: props.fieldNames,
      serviceConfig: props.serviceConfig ? props.serviceConfig : {
        onRequest: props.onRequest
      },
      textConfig: props.textConfig,
      onChange: onChange,
      onChangeDataSource: onChangeDataSource,
      treeProps: treePropsFt
    }) : /*#__PURE__*/jsx(HorizontalLayout, {
      value: values,
      onDeleteItem: onDeleteItem,
      fieldNames: props.fieldNames,
      serviceConfig: props.serviceConfig ? props.serviceConfig : {
        onRequest: props.onRequest
      },
      textConfig: props.textConfig,
      onChange: onChange,
      onChangeDataSource: onChangeDataSource,
      treeProps: treePropsFt
    })
  });
};

/**
 * 树节点数据选择，一般用于选择员工等
 * ```
 * 1. 可通过 treeProps.checkableType 配置多选节点模式（包括返回所有节点、只返回叶子节点、叶子节点&父节点全选只返回父节点），默认只返回叶子节点
 * 2. demo: https://fex.qa.tcshuke.com/docs/admin/main/selector/tree
 * ```
 */
var TreeModal$1 = function TreeModal(props) {
  var _props$size = props.size,
    size = _props$size === void 0 ? 'large' : _props$size;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var htmlSize = useSize(document.querySelector('html'));
  var screenType = fbaHooks.useResponsivePoint() || '';
  var direction = screenType === 'xs' ? 'vertical' : 'horizontal';
  var handleOnClick = useMemoizedFn(function () {
    if (props.disabled) return;
    setIsOpen(true);
  });
  var Action = props.children.type;
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    values = _useState4[0],
    setValues = _useState4[1];
  var originalValuesRef = useRef();
  useEffect(function () {
    originalValuesRef.current = props.value || [];
    setValues(props.value);
  }, [props.value]);
  var customSize = useMemo(function () {
    if (!(htmlSize !== null && htmlSize !== void 0 && htmlSize.height) || !screenType) return undefined;
    var isXsSm = ['xs', 'sm'].includes(screenType);
    var sizeCalculate = {};
    if (size == 'large') {
      sizeCalculate = {
        height: (htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height) * 0.65,
        width: 800
      };
    } else if (size == 'small') {
      sizeCalculate = {
        height: (htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height) * 0.45,
        width: 450
      };
    } else if (size == 'middle') {
      sizeCalculate = {
        height: (htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height) * 0.55,
        width: 600
      };
    }
    return {
      height: props.modalBodyHeight || sizeCalculate.height,
      width: isXsSm ? '90%' : props.modalWidth || sizeCalculate.width
    };
  }, [htmlSize === null || htmlSize === void 0 ? void 0 : htmlSize.height, screenType, size, props.modalBodyHeight, props.modalWidth]);
  var onSubmit = function onSubmit() {
    var _props$onChange;
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, values);
    setIsOpen(false);
  };
  var onCancel = function onCancel() {
    setIsOpen(false);
    setValues(originalValuesRef.current);
  };
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Action, _objectSpread2(_objectSpread2({}, props.children.props), {}, {
      onClick: handleOnClick
    })), /*#__PURE__*/jsx(Modal, {
      className: props.modalClassName,
      title: props.textConfig.title || '选择',
      open: isOpen,
      onCancel: onCancel,
      forceRender: props.forceRender,
      centered: true,
      width: customSize === null || customSize === void 0 ? void 0 : customSize.width,
      onOk: onSubmit,
      styles: direction === 'horizontal' ? {
        body: {
          height: customSize === null || customSize === void 0 ? void 0 : customSize.height,
          maxHeight: 'calc(100vh - 200px)',
          padding: '0px 20px 0 20px'
        },
        content: {
          padding: 0
        },
        header: {
          padding: '20px 24px 0 20px'
        },
        footer: {
          padding: '0 24px 20px 24px'
        }
      } : {
        body: {
          height: customSize === null || customSize === void 0 ? void 0 : customSize.height
        }
      },
      children: /*#__PURE__*/jsx(TreeModalContent, _objectSpread2(_objectSpread2({}, props), {}, {
        value: values,
        onChange: function onChange(values) {
          setValues(values);
        }
      }))
    })]
  });
};

var TreeModal = attachPropertiesToComponent(TreeModal$1, {
  Content: TreeModalContent
});

export { TreeModal };
//# sourceMappingURL=index.js.map