GuideTour hook offline

compiled/alipay/src/GuideTour/index.ts

@@ -1,49 +1,49 @@
-import { useEvent } from 'functional-mini/component';
+import {
+  Component,
+  triggerEventValues,
+  triggerEventOnly,
+} from '../_util/simply';
+import { GuideTourDefaultProps } from './props';
+import mixinValue from '../mixins/value';
 import '../_util/assert-component2';
-import { mountComponent } from '../_util/component';
-import { useComponentEvent } from '../_util/hooks/useComponentEvent';
-import { useMixState } from '../_util/hooks/useMixState';
-import { GuideTourDefaultProps, IGuideTour } from './props';
 
-const GuideTour = (props: IGuideTour) => {
-  const [state, { isControlled, update }] = useMixState(props.defaultCurrent, {
-    value: props.current,
-  });
-  const { triggerEvent, triggerEventOnly } = useComponentEvent(props);
+Component(
+  GuideTourDefaultProps,
+  {
+    async onNext() {
+      const currentValue = this.getValue();
+      const newCurrent = currentValue + 1;
+      if (!this.isControlled()) {
+        this.update(newCurrent);
+      }
+      triggerEventValues(this, 'change', [newCurrent]);
+    },
 
-  useEvent('onNext', () => {
-    const currentValue = state;
-    const newCurrent = currentValue + 1;
-    if (!isControlled) {
-      update(newCurrent);
-    }
-    triggerEvent('change', newCurrent);
-  });
+    async onPrev() {
+      const currentValue = this.getValue();
+      const newCurrent = currentValue - 1;
+      if (!this.isControlled()) {
+        this.update(newCurrent);
+      }
+      triggerEventValues(this, 'change', [newCurrent]);
+    },
 
-  useEvent('onPrev', () => {
-    const currentValue = state;
-    const newCurrent = currentValue - 1;
-    if (!isControlled) {
-      update(newCurrent);
-    }
-    triggerEvent('change', newCurrent);
-  });
+    onCancel() {
+      triggerEventOnly(this, 'cancel');
+    },
 
-  useEvent('onCancel', () => {
-    triggerEventOnly('cancel');
-  });
-
-  useEvent('onSwiperChange', (e) => {
-    const { current } = e.detail;
-    if (!isControlled) {
-      update(current);
-    }
-    triggerEvent('change', current);
-  });
-
-  return {
-    mixin: { value: state },
-  };
-};
-
-mountComponent(GuideTour, GuideTourDefaultProps);
+    async onSwiperChange(e) {
+      const { current } = e.detail;
+      if (!this.isControlled()) {
+        this.update(current);
+      }
+      triggerEventValues(this, 'change', [current]);
+    },
+  },
+  [
+    mixinValue({
+      valueKey: 'current',
+      defaultValueKey: 'defaultCurrent',
+    }),
+  ]
+);

compiled/alipay/src/_util/simply.ts

@@ -39,16 +39,18 @@ function mergeDefaultProps(defaultProps: Record<string, any> = {}) {
   };
 }
 
-type ComponentInstance<Props, Methods> = {};
+type ComponentInstance<Props, Methods, Mixins> = unknown;
 
-function ComponentImpl<Props, Methods = unknown>(
+function ComponentImpl<Props, Methods = unknown, Mixins = unknown>(
   defaultProps: Props,
-  methods?: Methods & ThisType<ComponentInstance<Props, Methods>>
+  methods?: Methods & ThisType<ComponentInstance<Props, Methods, Mixins>>,
+  mixins?: Mixins & any
 ) {
 
   Component({
     props: removeNullProps(mergeDefaultProps(defaultProps)),
     methods,
+    mixins,
   });
 }
 
@@ -115,4 +117,16 @@ export function triggerCatchEvent(instance: any, eventName: string, e?: any) {
 
 }
 
+export function getValueFromProps(instance: any, propName?: string) {
+  let value;
+  const props = instance.props;
+  if (!propName) {
+    return props;
+  }
+  value = props[propName];
+
+
+  return value;
+}
+
 export { ComponentImpl as Component };

compiled/alipay/src/mixins/value.ts

@@ -1,4 +1,5 @@
 import { IMixin4Legacy } from '@mini-types/alipay';
+import { getValueFromProps } from '../_util/simply';
 
 function equal(a, b) {
   if (a === b) {
@@ -16,20 +17,25 @@ export default ({
   valueKey = 'value',
   defaultValueKey = 'defaultValue',
   scopeKey = 'mixin',
-  transformValue = value => ({
+  transformValue = (value) => ({
     needUpdate: true,
     value,
   }),
 }: {
   valueKey?: string;
   defaultValueKey?: string;
   scopeKey?: string;
-  transformValue?: (this: any, value: any, extra: { nextProps: Record<string, any> }, ...args: any) => {
+  transformValue?: (
+    this: any,
+    value: any,
+    extra: { nextProps: Record<string, any> },
+    ...args: any
+  ) => {
     needUpdate: boolean;
     value?: any;
   };
 } = {}) => {
-  return {
+  let mixin = {
     data: {
       [scopeKey]: {
         value: undefined,
@@ -38,16 +44,10 @@ export default ({
       },
     },
     onInit() {
-      const value = typeof this.props[valueKey] !== 'undefined' ? this.props[valueKey] : this.props[defaultValueKey];
-      const { needUpdate } = this.update(value, {
-        nextProps: this.props,
-      });
-      if (!needUpdate) {
-        this.updateControlled();
-      }
+      this.init();
     },
     deriveDataFromProps(nextProps) {
-      if (!equal(nextProps[valueKey], this.props[valueKey])) {
+      if (!equal(nextProps[valueKey], getValueFromProps(this, valueKey))) {
         this.update(nextProps[valueKey], {
           nextProps,
         });
@@ -57,26 +57,32 @@ export default ({
       if (component2) {
         return;
       }
-      if (!equal(prevProps[valueKey], this.props[valueKey])) {
-        this.update(this.props[valueKey], {
-          nextProps: this.props,
+      if (!equal(prevProps[valueKey], getValueFromProps(this, valueKey))) {
+        this.update(getValueFromProps(this, valueKey), {
+          nextProps: getValueFromProps(this),
         });
       }
     },
     didMount() {
       if (component2) {
         return;
       }
-      const value = typeof this.props[valueKey] !== 'undefined' ? this.props[valueKey] : this.props[defaultValueKey];
-      const { needUpdate } = this.update(value, {
-        nextProps: this.props,
-      });
-      if (!needUpdate) {
-        this.updateControlled();
-      }
+      this.init();
     },
-    
+
     methods: {
+      init() {
+        const value =
+          typeof getValueFromProps(this, valueKey) !== 'undefined'
+            ? getValueFromProps(this, valueKey)
+            : getValueFromProps(this, defaultValueKey);
+        const { needUpdate } = this.update(value, {
+          nextProps: getValueFromProps(this),
+        });
+        if (!needUpdate) {
+          this.updateControlled();
+        }
+      },
       getValue(prevData?) {
         return (prevData || this.data)[scopeKey].value;
       },
@@ -87,10 +93,10 @@ export default ({
         return equal(this.getValue(prevData), this.getValue());
       },
       isControlled() {
-        if ('controlled' in this.props) {
-          return this.props.controlled;
+        if ('controlled' in getValueFromProps(this)) {
+          return getValueFromProps(this, 'controlled');
         }
-        return valueKey in this.props;
+        return valueKey in getValueFromProps(this);
       },
       updateControlled() {
         this.setData({
@@ -100,7 +106,8 @@ export default ({
         });
       },
       update(val, extra?, ...args) {
-        const { needUpdate, value } = transformValue.call(this, val, extra, ...args) || {};
+        const { needUpdate, value } =
+          transformValue.call(this, val, extra, ...args) || {};
         if (needUpdate) {
           this.setData({
             [scopeKey]: {
@@ -122,12 +129,19 @@ export default ({
     {
       getValue(prevData?: any): any;
       isControlled(): boolean;
-      updateControlled() : void;
-      update(val: any, extra?: any, ...args: any): {
+      updateControlled(): void;
+      update(
+        val: any,
+        extra?: any,
+        ...args: any
+      ): {
         needUpdate: boolean;
         value: any;
       };
       isEqualValue(prevData: any): boolean;
     }
-  >
+  >;
+
+
+  return mixin;
 };