amis 1.5.7 → 1.6.1

package/src/components/Cascader.tsx

@@ -0,0 +1,564 @@
+/**
+ * @file Cascader
+ * @author fex
+ */
+
+import React from 'react';
+import {autobind, getTreeAncestors} from '../utils/helper';
+import {themeable} from '../theme';
+import {NestedSelectProps} from '../renderers/Form/NestedSelect';
+import {Option, Options} from './Select';
+import intersectionBy from 'lodash/intersectionBy';
+import compact from 'lodash/compact';
+import find from 'lodash/find';
+import uniqBy from 'lodash/uniqBy';
+import Button from './Button';
+import {flattenTree, findTree, getTreeDepth} from '../utils/helper';
+
+export type CascaderOption = {
+  text?: string;
+  value?: string | number;
+  color?: string;
+  disabled?: boolean;
+  children?: Options;
+  className?: string;
+  [key: string]: any;
+};
+export interface CascaderProps extends NestedSelectProps {
+  value?: (number | string)[];
+  activeColor?: string;
+  optionRender?: ({
+    option,
+    selected
+  }: {
+    option: CascaderOption;
+    selected: boolean;
+  }) => React.ReactNode;
+  onClose?: () => void;
+  onConfirm?: (param: any) => void;
+  multiple?: boolean;
+}
+export type CascaderTab = {
+  options: Options;
+};
+
+export interface CascaderState {
+  selectedOptions: Options;
+  activeTab: number;
+  tabs: Array<{
+    options: Options;
+  }>;
+}
+
+export class Cascader extends React.Component<CascaderProps, CascaderState> {
+  static defaultProps = {
+    labelField: 'label',
+    valueField: 'value'
+  };
+  tabsRef: React.RefObject<HTMLDivElement> = React.createRef();
+  tabRef: React.RefObject<HTMLDivElement> = React.createRef();
+  constructor(props: CascaderProps) {
+    super(props);
+    this.state = {
+      selectedOptions: this.props.selectedOptions || [],
+      activeTab: 0,
+      tabs: [
+        {
+          options: this.props.options.slice() || []
+        }
+      ]
+    };
+  }
+  componentDidMount() {
+    const {multiple, options, valueField = 'value', cascade} = this.props;
+    let selectedOptions = this.props.selectedOptions.slice();
+    let parentsCount = 0;
+    let parentTree: Options = [];
+    selectedOptions.forEach((item: Option) => {
+      const parents = getTreeAncestors(options, item as any);
+      // 获取最长路径
+      if (parents && parents?.length > parentsCount) {
+        parentTree = parents;
+        parentsCount = parentTree.length;
+      }
+    });
+    const selectedValues = selectedOptions.map(
+      (option: Option) => option[valueField]
+    );
+    const tabs = parentTree.map((option: Option) => {
+      if (multiple && !cascade) {
+        if (
+          selectedValues.includes(option[valueField]) &&
+          option?.children?.length
+        ) {
+          option.children.forEach((option: Option) => (option.disabled = true));
+        }
+      }
+      return multiple
+        ? {
+            options: [
+              {
+                ...option,
+                isCheckAll: true
+              },
+              ...(option.children ? option.children : [])
+            ]
+          }
+        : {
+            options: option.children ? option.children : []
+          };
+    });
+    this.setState({
+      selectedOptions,
+      tabs: [...this.state.tabs, ...tabs]
+    });
+  }
+
+  @autobind
+  handleTabSelect(index: number) {
+    const tabs = this.state.tabs.slice(0, index + 1);
+    this.setState({
+      activeTab: index,
+      tabs
+    });
+  }
+
+  @autobind
+  getOptionParent(option: Option) {
+    const {options, valueField = 'value'} = this.props;
+    let ancestors: any[] = [];
+    findTree(options, (item, index, level, paths) => {
+      if (item[valueField] === option[valueField]) {
+        ancestors = paths;
+        return true;
+      }
+      return false;
+    });
+    return ancestors.length ? ancestors[ancestors.length - 1] : null;
+  }
+
+  @autobind
+  dealParentSelect(option: Option, selectedOptions: Options): Options {
+    const {valueField = 'value'} = this.props;
+    const parentOption = this.getOptionParent(option);
+    if (parentOption) {
+      const parentChildren = parentOption?.children;
+      const equalOption = intersectionBy(
+        selectedOptions,
+        parentChildren,
+        valueField
+      );
+      // 包含则选中父节点
+      const isParentSelected = find(selectedOptions, {
+        [valueField]: parentOption[valueField]
+      });
+      if (equalOption.length === parentChildren?.length && !isParentSelected) {
+        selectedOptions.push(parentOption);
+      }
+      if (equalOption.length !== parentChildren?.length && isParentSelected) {
+        const index = selectedOptions.findIndex(
+          (item: Option) => item[valueField] === parentOption[valueField]
+        );
+        selectedOptions.splice(index, 1);
+      }
+      return this.dealParentSelect(parentOption, selectedOptions);
+    } else {
+      return selectedOptions;
+    }
+  }
+
+  @autobind
+  flattenTreeWithLeafNodes(option: Option) {
+    return compact(
+      flattenTree(Array.isArray(option) ? option : [option], node => node)
+    );
+  }
+
+  @autobind
+  adjustOptionSelect(option: Option): boolean {
+    const {valueField = 'value'} = this.props;
+    const {selectedOptions} = this.state;
+    function loop(arr: any[]): boolean {
+      if (!arr.length) {
+        return false;
+      }
+      return arr.some((item: any) => item[valueField] === option[valueField]);
+    }
+    return loop(selectedOptions);
+  }
+
+  @autobind
+  getSelectedChildNum(option: Option): number {
+    let count = 0;
+    const loop = (arr: any[]) => {
+      if (!arr || !arr.length) {
+        return;
+      }
+      for (let item of arr) {
+        if (item.children) {
+          loop(item.children || []);
+        } else {
+          if (this.adjustOptionSelect(item)) {
+            count++;
+          }
+        }
+      }
+    };
+    loop(option.children || []);
+    return count;
+  }
+
+  @autobind
+  dealOptionDisable(selectedOptions: Options) {
+    const {
+      valueField = 'value',
+      options,
+      cascade,
+      multiple,
+      onlyChildren // 子节点可点击
+    } = this.props;
+    if (!multiple || cascade || onlyChildren) {
+      return;
+    }
+    const selectedValues = selectedOptions.map(
+      (option: Option) => option[valueField]
+    );
+    const loop = (option: Option) => {
+      if (!option.children) {
+        return;
+      }
+      option.children &&
+        option.children.forEach((childOption: Option) => {
+          if (
+            !selectedValues.includes(option[valueField]) &&
+            !option.disabled
+          ) {
+            childOption.disabled = false;
+          }
+
+          if (selectedValues.includes(option[valueField]) || option.disabled) {
+            childOption.disabled = true;
+          }
+          loop(childOption);
+        });
+    };
+    options.forEach((option: Option) => loop(option));
+  }
+
+  @autobind
+  dealChildrenSelect(option: Option, selectedOptions: Options) {
+    const {valueField = 'value'} = this.props;
+    let index = selectedOptions.findIndex(
+      (item: Option) => item[valueField] === option[valueField]
+    );
+    if (index !== -1) {
+      selectedOptions.splice(index, 1);
+    } else {
+      selectedOptions.push(option);
+    }
+    function loop(option: Option) {
+      if (!option.children) {
+        return;
+      }
+      option.children.forEach((item: Option) => {
+        if (index !== -1) {
+          // 删除选中节点及其子节点
+          selectedOptions = selectedOptions.filter(
+            (sItem: Option) => sItem[valueField] !== item[valueField]
+          );
+        } else {
+          // 添加节点及其子节点
+          selectedOptions.push(item);
+        }
+        loop(item);
+      });
+    }
+    loop(option);
+    return selectedOptions;
+  }
+
+  getParentTree = (option: Option, arr: Options): Options => {
+    const parentOption = this.getOptionParent(option);
+    if (parentOption) {
+      arr.push(parentOption);
+      return this.getParentTree(parentOption, arr);
+    }
+    return arr;
+  };
+
+  @autobind
+  onSelect(option: CascaderOption, tabIndex: number) {
+    const {multiple, valueField = 'value', cascade} = this.props;
+
+    let tabs = this.state.tabs.slice();
+    let {activeTab} = this.state;
+    let selectedOptions = this.state.selectedOptions;
+    const isDisable = option.disabled;
+    if (!isDisable) {
+      if (multiple) {
+        // 父子级分离
+        if (cascade) {
+          if (
+            option.isCheckAll ||
+            !option.children ||
+            !option.children.length
+          ) {
+            let index = selectedOptions.findIndex(
+              (item: Option) => item[valueField] === option[valueField]
+            );
+            if (index !== -1) {
+              selectedOptions.splice(index, 1);
+            } else {
+              selectedOptions.push(option);
+            }
+          }
+        } else {
+          if (
+            option.isCheckAll ||
+            !option.children ||
+            !option.children.length
+          ) {
+            selectedOptions = this.dealChildrenSelect(option, selectedOptions);
+            selectedOptions = this.dealParentSelect(option, selectedOptions);
+          }
+        }
+      } else {
+        // 单选
+        selectedOptions = this.getParentTree(option, [option]);
+      }
+    }
+    this.dealOptionDisable(selectedOptions);
+
+    if (tabs.length > tabIndex + 1) {
+      tabs = tabs.slice(0, tabIndex + 1);
+    }
+
+    requestAnimationFrame(() => {
+      const tabWidth = this.tabRef.current?.offsetWidth || 1;
+      const parentTree = this.getParentTree(option, [option]);
+      const scrollLeft = (parentTree.length - 2) * tabWidth;
+      if (scrollLeft !== 0) {
+        (this.tabsRef.current as HTMLElement).scrollTo(scrollLeft, 0);
+      }
+    });
+
+    if (option?.children && !option.isCheckAll) {
+      const nextTab = multiple
+        ? {
+            options: [
+              {
+                ...option,
+                isCheckAll: true
+              },
+              ...option.children
+            ]
+          }
+        : {
+            options: option.children
+          };
+
+      if (tabs[tabIndex + 1]) {
+        tabs[tabIndex + 1] = nextTab;
+      } else {
+        tabs.push(nextTab);
+      }
+      activeTab += 1;
+    }
+    this.setState({
+      tabs,
+      activeTab,
+      selectedOptions
+    });
+  }
+
+  @autobind
+  onNextClick(option: CascaderOption, tabIndex: number) {
+    let {activeTab} = this.state;
+    let tabs = this.state.tabs.slice();
+    if (option.c)
+      if (option?.children) {
+        const nextTab = {
+          options: option.children
+        };
+        if (tabs[tabIndex + 1]) {
+          tabs[tabIndex + 1] = nextTab;
+        } else {
+          tabs.push(nextTab);
+        }
+        activeTab += 1;
+      }
+    this.setState({
+      tabs,
+      activeTab
+    });
+  }
+
+  @autobind
+  getSubmitOptions(selectedOptions: Options): Options {
+    const _selectedOptions: Options = [];
+    const {
+      multiple,
+      options,
+      valueField = 'value',
+      cascade,
+      onlyChildren,
+      withChildren
+    } = this.props;
+    if (cascade || onlyChildren || withChildren || !multiple) {
+      return selectedOptions;
+    }
+    const selectedValues = selectedOptions.map(
+      (option: Option) => option[valueField]
+    );
+    function loop(options: Options) {
+      if (!options || !options.length) {
+        return;
+      }
+      options.forEach((option: Option) => {
+        if (selectedValues.includes(option[valueField])) {
+          _selectedOptions.push(option);
+        } else {
+          loop(option.children ? option.children : []);
+        }
+      });
+    }
+    loop(options);
+    return _selectedOptions;
+  }
+
+  @autobind
+  confirm() {
+    const {onChange, joinValues, delimiter, extractValue, valueField, onClose} =
+      this.props;
+    let {selectedOptions} = this.state;
+    let _selectedOptions = this.getSubmitOptions(selectedOptions);
+    _selectedOptions = uniqBy(_selectedOptions, valueField);
+    onChange(
+      joinValues
+        ? _selectedOptions
+            .map(item => item[valueField as string])
+            .join(delimiter)
+        : extractValue
+        ? _selectedOptions.map(item => item[valueField as string])
+        : _selectedOptions
+    );
+    onClose && onClose();
+  }
+
+  @autobind
+  renderOption(option: CascaderOption, tabIndex: number) {
+    const {
+      activeColor,
+      optionRender,
+      labelField,
+      valueField = 'value',
+      classnames: cx,
+      cascade,
+      multiple
+    } = this.props;
+    const {selectedOptions} = this.state;
+    const selectedValueArr = selectedOptions.map(item => item[valueField]);
+
+    let selfChecked = selectedValueArr.includes(option[valueField]);
+    const color = option.color || (selfChecked ? activeColor : undefined);
+    const Text = optionRender ? (
+      optionRender({option, selected: selfChecked})
+    ) : (
+      <span>{option[labelField]}</span>
+    );
+    return (
+      <li
+        className={cx(
+          'Cascader-option',
+          {
+            selected: selfChecked,
+            disabled: option.disabled
+          },
+          option.className
+        )}
+        style={{color}}
+        onClick={() => this.onSelect(option, tabIndex)}
+        key={tabIndex + '-' + option[valueField]}
+      >
+        <span className={cx('Cascader-option--text')}>{Text}</span>
+      </li>
+    );
+  }
+
+  @autobind
+  renderOptions(options: Options, tabIndex: number) {
+    const {classnames: cx} = this.props;
+    return (
+      <ul key={tabIndex} className={cx('Cascader-options')}>
+        {options.map(option => this.renderOption(option, tabIndex))}
+      </ul>
+    );
+  }
+
+  @autobind
+  renderTabs() {
+    const {classnames: cx, options} = this.props;
+    const {tabs} = this.state;
+    const depth = getTreeDepth(options);
+    return (
+      <div
+        className={cx(`Cascader-tabs`, depth > 3 ? 'scrollable' : '')}
+        ref={this.tabsRef}
+      >
+        {tabs.map((tab: CascaderTab, tabIndex: number) => {
+          const {options} = tab;
+          return (
+            <div
+              className={cx(`Cascader-tab`)}
+              ref={this.tabRef}
+              key={tabIndex}
+            >
+              {this.renderOptions(options, tabIndex)}
+            </div>
+          );
+        })}
+        {depth <= 3 && options.length
+          ? Array(getTreeDepth(options) - tabs.length)
+              .fill(1)
+              .map((item: number, index: number) => (
+                <div className={cx(`Cascader-tab`)} key={index}></div>
+              ))
+          : null}
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      className,
+      onClose,
+      translate: __
+    } = this.props;
+
+    return (
+      <div className={cx(`Cascader`, className)}>
+        <div className={cx(`Cascader-btnGroup`)}>
+          <Button
+            className={cx(`Cascader-btnCancel`)}
+            level="text"
+            onClick={onClose}
+          >
+            {__('cancel')}
+          </Button>
+          <Button
+            className={cx(`Cascader-btnConfirm`)}
+            level="text"
+            onClick={this.confirm}
+          >
+            {__('confirm')}
+          </Button>
+        </div>
+        {this.renderTabs()}
+      </div>
+    );
+  }
+}
+
+export default themeable(Cascader);

package/src/components/ChainedSelection.tsx

@@ -78,7 +78,13 @@ export class ChainedSelection extends BaseSelection<
         onClick={() => this.toggleOption(option)}
       >
         <div className={cx('ChainedSelection-itemLabel')}>
-          {itemRender(option)}
+          {itemRender(option, {
+            index: index,
+            multiple: multiple,
+            checked: !!~valueArray.indexOf(option),
+            onChange: () => this.toggleOption(option),
+            disabled: disabled || option.disabled
+          })}
         </div>
 
         {multiple ? (
@@ -100,7 +106,8 @@ export class ChainedSelection extends BaseSelection<
       disabled,
       classnames: cx,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
     const valueArray = this.valueArray;
 
@@ -118,7 +125,13 @@ export class ChainedSelection extends BaseSelection<
           onClick={() => this.selectOption(option, depth, id)}
         >
           <div className={cx('ChainedSelection-itemLabel')}>
-            {itemRender(option)}
+            {itemRender(option, {
+              index: index,
+              multiple: multiple,
+              checked: !!~this.state.selected.indexOf(id),
+              onChange: () => this.selectOption(option, depth, id),
+              disabled: disabled || option.disabled
+            })}
           </div>
 
           {option.defer && option.loading ? <Spinner size="sm" show /> : null}