@zkwq/business 0.0.1

package/src/components/base/ui/cascader-panel/cascader-menu.vue

@@ -0,0 +1,138 @@
+<script lang="jsx"  type="text/jsx">
+import BaseScrollbar from '../scrollbar/index';
+import CascaderNode from './cascader-node.vue';
+import Locale from '../mixin/locale';
+import { generateId } from '../util/index';
+
+export default {
+  name: 'BaseCascaderMenu',
+
+  mixins: [Locale],
+
+  inject: ['panel'],
+
+  components: {
+    BaseScrollbar,
+    CascaderNode
+  },
+
+  props: {
+    nodes: {
+      type: Array,
+      required: true
+    },
+    index: Number
+  },
+
+  data() {
+    return {
+      activeNode: null,
+      hoverTimer: null,
+      id: generateId()
+    };
+  },
+
+  computed: {
+    isEmpty() {
+      return !this.nodes.length;
+    },
+    menuId() {
+      return `cascader-menu-${this.id}-${this.index}`;
+    }
+  },
+
+  methods: {
+    handleExpand(e) {
+      this.activeNode = e.target;
+    },
+    handleMouseMove(e) {
+      const { activeNode, hoverTimer } = this;
+      const { hoverZone } = this.$refs;
+
+      if (!activeNode || !hoverZone) return;
+
+      if (activeNode.contains(e.target)) {
+        clearTimeout(hoverTimer);
+
+        const { left } = this.$el.getBoundingClientRect();
+        const startX = e.clientX - left;
+        const { offsetWidth, offsetHeight } = this.$el;
+        const top = activeNode.offsetTop;
+        const bottom = top + activeNode.offsetHeight;
+
+        hoverZone.innerHTML = `
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
+        `;
+      } else if (!hoverTimer) {
+        this.hoverTimer = setTimeout(this.clearHoverZone, this.panel.config.hoverThreshold);
+      }
+    },
+    clearHoverZone() {
+      const { hoverZone } = this.$refs;
+      if (!hoverZone) return;
+      hoverZone.innerHTML = '';
+    },
+
+    renderEmptyText(h) {
+      return (
+        <div class="base-cascader-menu__empty-text">{ this.t('base.cascader.noData') }</div>
+      );
+    },
+    renderNodeList(h) {
+      const { menuId } = this;
+      const { isHoverMenu } = this.panel;
+      const events = { on: {} };
+
+      if (isHoverMenu) {
+        events.on.expand = this.handleExpand;
+      }
+
+      const nodes = this.nodes.map((node, index) => {
+        const { hasChildren } = node;
+        return (
+          <cascader-node
+            key={ node.uid }
+            node={ node }
+            node-id={ `${menuId}-${index}` }
+            aria-haspopup={ hasChildren }
+            aria-owns = { hasChildren ? menuId : null }
+            { ...events }></cascader-node>
+        );
+      });
+
+      return [
+        ...nodes,
+        isHoverMenu ? <svg ref='hoverZone' class='base-cascader-menu__hover-zone'></svg> : null
+      ];
+    }
+  },
+
+  render(h) {
+    const { isEmpty, menuId } = this;
+    const events = { nativeOn: {} };
+
+    // optimize hover to expand experience (#8010)
+    if (this.panel.isHoverMenu) {
+      events.nativeOn.mousemove = this.handleMouseMove;
+      // events.nativeOn.mouseleave = this.clearHoverZone;
+    }
+
+    return (
+      <base-scrollbar
+        tag="ul"
+        role="menu"
+        id={ menuId }
+        class="base-cascader-menu"
+        wrap-class="base-cascader-menu__wrap"
+        view-class={{
+          'base-cascader-menu__list': true,
+          'is-empty': isEmpty
+        }}
+        { ...events }>
+        { isEmpty ? this.renderEmptyText(h) : this.renderNodeList(h) }
+      </base-scrollbar>
+    );
+  }
+};
+</script>

package/src/components/base/ui/cascader-panel/cascader-node.vue

@@ -0,0 +1,246 @@
+<script lang="jsx">
+  import BaseCheckbox from '../checkbox/checkbox';
+  import BaseRadio from '../radio/radio';
+  import { isEqual } from '../util/index';
+
+  const stopPropagation = e => e.stopPropagation();
+
+  export default {
+    inject: ['panel'],
+
+    components: {
+      BaseCheckbox,
+      BaseRadio
+    },
+
+    props: {
+      node: {
+        required: true
+      },
+      nodeId: String
+    },
+
+    computed: {
+      config() {
+        return this.panel.config;
+      },
+      isLeaf() {
+        return this.node.isLeaf;
+      },
+      isDisabled() {
+        return this.node.isDisabled;
+      },
+      checkedValue() {
+        return this.panel.checkedValue;
+      },
+      isChecked() {
+        return this.node.isSameNode(this.checkedValue);
+      },
+      inActivePath() {
+        return this.isInPath(this.panel.activePath);
+      },
+      inCheckedPath() {
+        if (!this.config.checkStrictly) return false;
+
+        return this.panel.checkedNodePaths
+          .some(checkedPath => this.isInPath(checkedPath));
+      },
+      value() {
+        return this.node.getValueByOption();
+      }
+    },
+
+    methods: {
+      handleExpand() {
+        const { panel, node, isDisabled, config } = this;
+        const { multiple, checkStrictly } = config;
+
+        if (!checkStrictly && isDisabled || node.loading) return;
+
+        if (config.lazy && !node.loaded) {
+          panel.lazyLoad(node, () => {
+            // do not use cached leaf value here, invoke this.isLeaf to get new value.
+            const { isLeaf } = this;
+
+            if (!isLeaf) this.handleExpand();
+            if (multiple) {
+              // if leaf sync checked state, else clear checked state
+              const checked = isLeaf ? node.checked : false;
+              this.handleMultiCheckChange(checked);
+            }
+          });
+        } else {
+          panel.handleExpand(node);
+        }
+      },
+
+      handleCheckChange() {
+        const { panel, value, node } = this;
+        panel.handleCheckChange(value);
+        panel.handleExpand(node);
+      },
+
+      handleMultiCheckChange(checked) {
+        this.node.doCheck(checked);
+        this.panel.calculateMultiCheckedValue();
+      },
+
+      isInPath(pathNodes) {
+        const { node } = this;
+        const selectedPathNode = pathNodes[node.level - 1] || {};
+        return selectedPathNode.uid === node.uid;
+      },
+
+      renderPrefix(h) {
+        const { isLeaf, isChecked, config } = this;
+        const { checkStrictly, multiple } = config;
+
+        if (multiple) {
+          return this.renderCheckbox(h);
+        } else if (checkStrictly) {
+          return this.renderRadio(h);
+        } else if (isLeaf && isChecked) {
+          return this.renderCheckIcon(h);
+        }
+
+        return null;
+      },
+
+      renderPostfix(h) {
+        const { node, isLeaf } = this;
+
+        if (node.loading) {
+          return this.renderLoadingIcon(h);
+        } else if (!isLeaf) {
+          return this.renderExpandIcon(h);
+        }
+
+        return null;
+      },
+
+      renderCheckbox(h) {
+        const { node, config, isDisabled } = this;
+        const events = {
+          on: { change: this.handleMultiCheckChange },
+          nativeOn: {}
+        };
+
+        if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.
+          events.nativeOn.click = stopPropagation;
+        }
+
+        return (
+          <base-checkbox
+            value={ node.checked }
+            indeterminate={ node.indeterminate }
+            disabled={ isDisabled }
+            { ...events }
+          ></base-checkbox>
+        );
+      },
+
+      renderRadio(h) {
+        let { checkedValue, value, isDisabled } = this;
+
+        // to keep same reference if value cause radio's checked state is calculated by reference comparision;
+        if (isEqual(value, checkedValue)) {
+          value = checkedValue;
+        }
+
+        return (
+          <base-radio
+            value={ checkedValue }
+            label={ value }
+            disabled={ isDisabled }
+            onChange={ this.handleCheckChange }
+            nativeOnClick={ stopPropagation }>
+            {/* add an empty element to avoid render label */}
+            <span></span>
+          </base-radio>
+        );
+      },
+
+      renderCheckIcon(h) {
+        return (
+          <i class="base-icon-check base-cascader-node__prefix"></i>
+        );
+      },
+
+      renderLoadingIcon(h) {
+        return (
+          <i class="base-icon-loading base-cascader-node__postfix"></i>
+        );
+      },
+
+      renderExpandIcon(h) {
+        return (
+          <i class="base-icon-arrow-right base-cascader-node__postfix"></i>
+        );
+      },
+
+      renderContent(h) {
+        const { panel, node } = this;
+        const render = panel.renderLabelFn;
+        const vnode = render
+          ? render({ node, data: node.data })
+          : null;
+
+        return (
+          <span class="base-cascader-node__label">{ vnode || node.label }</span>
+        );
+      }
+    },
+
+    render(h) {
+      const {
+        inActivePath,
+        inCheckedPath,
+        isChecked,
+        isLeaf,
+        isDisabled,
+        config,
+        nodeId
+      } = this;
+      const { expandTrigger, checkStrictly, multiple } = config;
+      const disabled = !checkStrictly && isDisabled;
+      const events = { on: {} };
+
+      if (expandTrigger === 'click') {
+        events.on.click = this.handleExpand;
+      } else {
+        events.on.mouseenter = e => {
+          this.handleExpand();
+          this.$emit('expand', e);
+        };
+        events.on.focus = e => {
+          this.handleExpand();
+          this.$emit('expand', e);
+        };
+      }
+      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
+        events.on.click = this.handleCheckChange;
+      }
+
+      return (
+        <li
+          role="menuitem"
+          id={ nodeId }
+          aria-expanded={ inActivePath }
+          tabindex={ disabled ? null : -1 }
+          class={{
+            'base-cascader-node': true,
+            'is-selectable': checkStrictly,
+            'in-active-path': inActivePath,
+            'in-checked-path': inCheckedPath,
+            'is-active': isChecked,
+            'is-disabled': disabled
+          }}
+          {...events}>
+          { this.renderPrefix(h) }
+          { this.renderContent(h) }
+          { this.renderPostfix(h) }
+        </li>
+      );
+    }
+  };
+</script>