plain-design 1.0.0-beta.73 → 1.0.0-beta.75

package/src/packages/components/Tooltip/index.tsx

@@ -1,118 +1,118 @@
-import {designComponent, getComponentCls, mergeAttrs, nextTick, onMounted, onUpdated, PropType, reactive, useClasses, useModel, useRefs, watch} from "plain-design-composition";
-import {debounce} from "plain-utils/utils/debounce";
-import './tooltip.scss';
-import {ThemeSize} from "../../uses/useStyle";
-import {Popup} from "../Popup";
-import {ePopupAnimation, iPopupAnimation, iPopupPlacement} from "../usePopup/utils/popup.utils";
-
-export const Tooltip = designComponent({
-  name: 'tooltip',
-  inheritPropsType: Popup,
-  props: {
-    modelValue: { type: Boolean },
-    placement: { type: String as PropType<iPopupPlacement>, default: 'top' },
-    animation: { type: String as PropType<iPopupAnimation>, default: ePopupAnimation.fade },
-    dark: { type: Boolean, default: true },
-    size: { type: String as PropType<typeof ThemeSize.TYPE> },
-    hideOnScroll: { type: Boolean, default: true },
-    hideOnClickReference: { type: Boolean, default: true },
-    minWidth: { type: Number, default: 68 },
-
-    overflowTooltip: { type: Boolean },
-    message: {},
-  },
-  emits: {
-    onUpdateModelValue: (val?: boolean) => true,
-  },
-  slots: ['default', 'popper'],
-  setup({ props, event: { emit }, slots, attrs }) {
-
-    const { refs, onRef } = useRefs({ popup: Popup });
-
-    const state = reactive({
-      getReference: () => null as null | HTMLElement,
-      scrollWidth: 0,
-      offsetWidth: 0,
-    });
-
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-
-    const classes = useClasses(() => [
-      getComponentCls('tooltip'),
-    ]);
-
-    const handler = {
-      onReferenceDetected: (reference: HTMLElement | null) => {
-        if (!!reference && props.overflowTooltip) {
-          reference.style.textOverflow = 'ellipsis';
-          reference.style.overflow = 'hidden';
-          reference.style.whiteSpace = 'nowrap';
-        }
-        state.getReference = () => reference;
-        methods.refresh();
-      },
-    };
-
-    const methods = {
-      refresh: debounce(() => {
-        if (!props.overflowTooltip) {return;}
-        const reference = state.getReference();
-        if (!reference) return;
-        const { scrollWidth, offsetWidth } = reference as HTMLElement;
-        if (state.scrollWidth != scrollWidth) state.scrollWidth = scrollWidth;
-        if (state.offsetWidth != offsetWidth) state.offsetWidth = offsetWidth;
-      }, 100)
-    };
-
-    watch(() => props.message, async () => {
-      await nextTick();
-      model.value && refs.popup?.refresh();
-    });
-
-    if (!!props.overflowTooltip) {
-      onUpdated(() => methods.refresh());
-      onMounted(() => methods.refresh());
-    }
-
-    /*当Tooltip要关闭时，渲染上一次的message，避免因为message变化导致关系时显示的内容变化过大*/
-    let prevMessage: any = props.message;
-    let prevShow: boolean = model.value;
-    return {
-      refer: {
-        ...methods,
-      },
-      render: () => {
-        const message = !prevShow && model.value ? props.message : !model.value ? prevMessage : props.message;
-        /*保留最后一次不为空的message，使得隐藏的时候不会因为失去消息导致晃动的问题*/
-        prevMessage = props.message == null ? prevMessage : props.message;
-
-        return (
-          <Popup
-            ref={onRef.popup}
-            v-model={model.value}
-            {...mergeAttrs({
-              destroyOnClose: true,
-              placement: props.placement,
-              animation: props.animation,
-              externalClass: classes.value,
-              onReferenceDetected: handler.onReferenceDetected,
-              disabled: !!props.overflowTooltip && state.offsetWidth === state.scrollWidth,
-              popperSize: props.size || ThemeSize.mini,
-              dark: props.dark,
-              hideOnScroll: props.hideOnScroll,
-              hideOnClickReference: props.hideOnClickReference,
-              minWidth: props.minWidth,
-            }, attrs)}
-          >
-            {{
-              default: () => slots.default(),
-              popper: () => slots.popper(<span>{message || '-'}</span>),
-            }}
-          </Popup>
-        );
-      }
-    };
-  },
-});
-
-export default Tooltip;
+import {designComponent, getComponentCls, mergeAttrs, nextTick, onMounted, onUpdated, PropType, reactive, useClasses, useModel, useRefs, watch} from "plain-design-composition";
+import {debounce} from "plain-utils/utils/debounce";
+import './tooltip.scss';
+import {ThemeSize} from "../../uses/useStyle";
+import {Popup} from "../Popup";
+import {ePopupAnimation, iPopupAnimation, iPopupPlacement} from "../usePopup/utils/popup.utils";
+
+export const Tooltip = designComponent({
+  name: 'tooltip',
+  inheritPropsType: Popup,
+  props: {
+    modelValue: { type: Boolean },
+    placement: { type: String as PropType<iPopupPlacement>, default: 'top' },
+    animation: { type: String as PropType<iPopupAnimation>, default: ePopupAnimation.fade },
+    dark: { type: Boolean, default: true },
+    size: { type: String as PropType<typeof ThemeSize.TYPE> },
+    hideOnScroll: { type: Boolean, default: true },
+    hideOnClickReference: { type: Boolean, default: true },
+    minWidth: { type: Number, default: 68 },
+
+    overflowTooltip: { type: Boolean },
+    message: {},
+  },
+  emits: {
+    onUpdateModelValue: (val?: boolean) => true,
+  },
+  slots: ['default', 'popper'],
+  setup({ props, event: { emit }, slots, attrs }) {
+
+    const { refs, onRef } = useRefs({ popup: Popup });
+
+    const state = reactive({
+      getReference: () => null as null | HTMLElement,
+      scrollWidth: 0,
+      offsetWidth: 0,
+    });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const classes = useClasses(() => [
+      getComponentCls('tooltip'),
+    ]);
+
+    const handler = {
+      onReferenceDetected: (reference: HTMLElement | null) => {
+        if (!!reference && props.overflowTooltip) {
+          reference.style.textOverflow = 'ellipsis';
+          reference.style.overflow = 'hidden';
+          reference.style.whiteSpace = 'nowrap';
+        }
+        state.getReference = () => reference;
+        methods.refresh();
+      },
+    };
+
+    const methods = {
+      refresh: debounce(() => {
+        if (!props.overflowTooltip) {return;}
+        const reference = state.getReference();
+        if (!reference) return;
+        const { scrollWidth, offsetWidth } = reference as HTMLElement;
+        if (state.scrollWidth != scrollWidth) state.scrollWidth = scrollWidth;
+        if (state.offsetWidth != offsetWidth) state.offsetWidth = offsetWidth;
+      }, 100)
+    };
+
+    watch(() => props.message, async () => {
+      await nextTick();
+      model.value && refs.popup?.refresh();
+    });
+
+    if (!!props.overflowTooltip) {
+      onUpdated(() => methods.refresh());
+      onMounted(() => methods.refresh());
+    }
+
+    /*当Tooltip要关闭时，渲染上一次的message，避免因为message变化导致关系时显示的内容变化过大*/
+    let prevMessage: any = props.message;
+    let prevShow: boolean = model.value;
+    return {
+      refer: {
+        ...methods,
+      },
+      render: () => {
+        const message = !prevShow && model.value ? props.message : !model.value ? prevMessage : props.message;
+        /*保留最后一次不为空的message，使得隐藏的时候不会因为失去消息导致晃动的问题*/
+        prevMessage = props.message == null ? prevMessage : props.message;
+
+        return (
+          <Popup
+            ref={onRef.popup}
+            v-model={model.value}
+            {...mergeAttrs({
+              destroyOnClose: true,
+              placement: props.placement,
+              animation: props.animation,
+              externalClass: classes.value,
+              onReferenceDetected: handler.onReferenceDetected,
+              disabled: !!props.overflowTooltip && state.offsetWidth === state.scrollWidth,
+              popperSize: props.size || ThemeSize.mini,
+              dark: props.dark,
+              hideOnScroll: props.hideOnScroll,
+              hideOnClickReference: props.hideOnClickReference,
+              minWidth: props.minWidth,
+            }, attrs)}
+          >
+            {{
+              default: () => slots.default(),
+              popper: () => slots.popper(<span>{message || '-'}</span>),
+            }}
+          </Popup>
+        );
+      }
+    };
+  },
+});
+
+export default Tooltip;

package/src/packages/components/Tooltip/tooltip.scss

@@ -1,5 +1,5 @@
-@include comp(tooltip) {
-  .popup-item-content {
-    text-align: center;
-  }
-}
+@include comp(tooltip) {
+  .popup-item-content {
+    text-align: center;
+  }
+}

package/src/packages/components/Transition/index.tsx

@@ -1,134 +1,134 @@
-import {designClassComponent, designComponent, onBeforeMount, PropType, useReference} from "plain-design-composition";
-import {createCounter} from 'plain-utils/utils/createCounter';
-import React from "react";
-import {CSSTransition, SwitchTransition} from "react-transition-group";
-import {findDOMNode} from "react-dom";
-
-const PlSwitchTransition = designComponent({
-  props: {
-    mode: { type: String as PropType<'out-in' | 'in-out'>, default: 'out-in' },
-    name: { type: String, required: true },
-  },
-  emits: {
-    onEnter: () => true,
-    onExit: () => true,
-    onEntered: () => true,
-    onExited: () => true,
-  },
-  slots: ['default'],
-  setup({ props, slots, event: { emit } }) {
-
-    const count = createCounter('pl_transition');
-
-    const state = {
-      key: count(),
-      prevKey: '' as any,
-      prevType: null as any,
-    };
-
-    return () => {
-      const children = slots.default() as any;
-      if (!children) {
-        state.key = count();
-      } else {
-        const { key, type } = children;
-        if (key !== state.prevKey || type !== state.prevType) {
-          state.key = count();
-          state.prevKey = key;
-          state.prevType = type;
-        }
-      }
-      return (
-        <SwitchTransition mode={props.mode}>
-          <CSSTransition
-            {...emit}
-            key={state.key}
-            classNames={props.name}
-            addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}>
-            {children}
-          </CSSTransition>
-        </SwitchTransition>
-      );
-    };
-  },
-});
-
-const PlDisappearTransition = designClassComponent({
-  props: {
-    name: { type: String, required: true },
-    show: { type: Boolean },
-    timeout: { type: Number, default: 300 },
-    unmount: { type: Boolean },
-  },
-  slots: ['default'],
-  emits: {
-    onEnter: () => true,
-    onExit: () => true,
-    onEntered: () => true,
-    onExited: () => true,
-  },
-  setup({ props, slots, event: { emit } }) {
-
-    const binding = props.unmount ? {} : {
-      ...emit,
-      onEnter: (el: HTMLElement) => {
-        el.style.display = '';
-        emit.onEnter();
-      },
-      onExited: (el: HTMLElement) => {
-        el.style.display = 'none';
-        emit.onExited();
-      },
-    };
-    const cssRef = useReference<any>();
-
-    if (!props.unmount && !props.show) {
-      onBeforeMount(() => {
-        const el = findDOMNode(cssRef.current) as HTMLElement | undefined;
-        !!el && (el.style.display = 'none');
-      });
-    }
-
-    return () => {
-      return (
-        <CSSTransition
-          {...binding}
-          ref={cssRef}
-          in={props.show}
-          timeout={props.timeout}
-          classNames={props.name}
-          unmountOnExit={props.unmount}>
-          {slots.default()}
-        </CSSTransition>
-      );
-    };
-  },
-});
-
-/**
- * switch:      name,mode
- * disappear:   show,timeout,name
- * @author  韦胜健
- * @date    2021/3/19 21:44
- */
-export const Transition: React.FC<{
-  children?: any,
-  switch?: boolean,
-  name: string,
-
-  mode?: 'out-in' | 'in-out',
-
-  show?: boolean,
-  timeout?: number,
-  unmount?: boolean,
-
-  onEntered?: () => void,
-  onExited?: () => void,
-  onEnter?: () => void,
-  onExit?: () => void,
-}> = (props) => {
-  if (props.switch) return <PlSwitchTransition {...props}/>;
-  else return <PlDisappearTransition {...props}/>;
-};
-
-export default Transition;
+import {designClassComponent, designComponent, onBeforeMount, PropType, useReference} from "plain-design-composition";
+import {createCounter} from 'plain-utils/utils/createCounter';
+import React from "react";
+import {CSSTransition, SwitchTransition} from "react-transition-group";
+import {findDOMNode} from "react-dom";
+
+const PlSwitchTransition = designComponent({
+  props: {
+    mode: { type: String as PropType<'out-in' | 'in-out'>, default: 'out-in' },
+    name: { type: String, required: true },
+  },
+  emits: {
+    onEnter: () => true,
+    onExit: () => true,
+    onEntered: () => true,
+    onExited: () => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const count = createCounter('pl_transition');
+
+    const state = {
+      key: count(),
+      prevKey: '' as any,
+      prevType: null as any,
+    };
+
+    return () => {
+      const children = slots.default() as any;
+      if (!children) {
+        state.key = count();
+      } else {
+        const { key, type } = children;
+        if (key !== state.prevKey || type !== state.prevType) {
+          state.key = count();
+          state.prevKey = key;
+          state.prevType = type;
+        }
+      }
+      return (
+        <SwitchTransition mode={props.mode}>
+          <CSSTransition
+            {...emit}
+            key={state.key}
+            classNames={props.name}
+            addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}>
+            {children}
+          </CSSTransition>
+        </SwitchTransition>
+      );
+    };
+  },
+});
+
+const PlDisappearTransition = designClassComponent({
+  props: {
+    name: { type: String, required: true },
+    show: { type: Boolean },
+    timeout: { type: Number, default: 300 },
+    unmount: { type: Boolean },
+  },
+  slots: ['default'],
+  emits: {
+    onEnter: () => true,
+    onExit: () => true,
+    onEntered: () => true,
+    onExited: () => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    const binding = props.unmount ? {} : {
+      ...emit,
+      onEnter: (el: HTMLElement) => {
+        el.style.display = '';
+        emit.onEnter();
+      },
+      onExited: (el: HTMLElement) => {
+        el.style.display = 'none';
+        emit.onExited();
+      },
+    };
+    const cssRef = useReference<any>();
+
+    if (!props.unmount && !props.show) {
+      onBeforeMount(() => {
+        const el = findDOMNode(cssRef.current) as HTMLElement | undefined;
+        !!el && (el.style.display = 'none');
+      });
+    }
+
+    return () => {
+      return (
+        <CSSTransition
+          {...binding}
+          ref={cssRef}
+          in={props.show}
+          timeout={props.timeout}
+          classNames={props.name}
+          unmountOnExit={props.unmount}>
+          {slots.default()}
+        </CSSTransition>
+      );
+    };
+  },
+});
+
+/**
+ * switch:      name,mode
+ * disappear:   show,timeout,name
+ * @author  韦胜健
+ * @date    2021/3/19 21:44
+ */
+export const Transition: React.FC<{
+  children?: any,
+  switch?: boolean,
+  name: string,
+
+  mode?: 'out-in' | 'in-out',
+
+  show?: boolean,
+  timeout?: number,
+  unmount?: boolean,
+
+  onEntered?: () => void,
+  onExited?: () => void,
+  onEnter?: () => void,
+  onExit?: () => void,
+}> = (props) => {
+  if (props.switch) return <PlSwitchTransition {...props}/>;
+  else return <PlDisappearTransition {...props}/>;
+};
+
+export default Transition;