plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/packages/components/KeepAlive/utils/keepalive.utils.ts

@@ -1,33 +1,33 @@
-import {isElement} from "react-is";
-
-export interface iKeepAliveMeta {
-  key: any,
-  type: any,
-  children: any,
-}
-
-/**
- * 获取有效唯一的ReactNode
- * @author  韦胜健
- * @date    2023.6.3 16:14
- */
-export function decodeKeepAliveMeta(children: any): null | iKeepAliveMeta {
-  if (children == null || children === false) {
-    return null;
-  }
-  const valueType = typeof children;
-  switch (valueType) {
-    case "string":
-    case "number":
-    case "boolean":
-      return { type: valueType, key: children, children };
-  }
-  if (isElement(children)) {
-    return { type: children.type, key: children.key, children };
-  }
-  if (Array.isArray(children)) {
-    console.error(`KeepAlive: can accept only one child, array children is not available!`);
-    return null;
-  }
-  return null;
-}
+import {isElement} from "react-is";
+
+export interface iKeepAliveMeta {
+  key: any,
+  type: any,
+  children: any,
+}
+
+/**
+ * 获取有效唯一的ReactNode
+ * @author  韦胜健
+ * @date    2023.6.3 16:14
+ */
+export function decodeKeepAliveMeta(children: any): null | iKeepAliveMeta {
+  if (children == null || children === false) {
+    return null;
+  }
+  const valueType = typeof children;
+  switch (valueType) {
+    case "string":
+    case "number":
+    case "boolean":
+      return { type: valueType, key: children, children };
+  }
+  if (isElement(children)) {
+    return { type: children.type, key: children.key, children };
+  }
+  if (Array.isArray(children)) {
+    console.error(`KeepAlive: can accept only one child, array children is not available!`);
+    return null;
+  }
+  return null;
+}

package/src/packages/components/KeyboardService/index.ts

@@ -1,214 +1,214 @@
-import {iKeyboardEvent} from "plain-design-composition";
-
-export enum KEY {
-  'shift' = 'shift',
-  'ctrl' = 'ctrl',
-  'alt' = 'alt',
-  'backspace' = 'backspace',
-  'tab' = 'tab',
-  'enter' = 'enter',
-  'esc' = 'esc',
-  'space' = 'space',
-  'del' = 'del',
-  'left' = 'left',
-  'up' = 'up',
-  'right' = 'right',
-  'down' = 'down',
-  'minus' = 'minus',
-  'equal' = 'equal',
-  'num_0' = 'num_0',
-  'num_1' = 'num_1',
-  'num_2' = 'num_2',
-  'num_3' = 'num_3',
-  'num_4' = 'num_4',
-  'num_5' = 'num_5',
-  'num_6' = 'num_6',
-  'num_7' = 'num_7',
-  'num_8' = 'num_8',
-  'num_9' = 'num_9',
-  'a' = 'a',
-  'b' = 'b',
-  'c' = 'c',
-  'd' = 'd',
-  'e' = 'e',
-  'f' = 'f',
-  'g' = 'g',
-  'h' = 'h',
-  'i' = 'i',
-  'j' = 'j',
-  'k' = 'k',
-  'l' = 'l',
-  'm' = 'm',
-  'n' = 'n',
-  'o' = 'o',
-  'p' = 'p',
-  'q' = 'q',
-  'r' = 'r',
-  's' = 's',
-  't' = 't',
-  'u' = 'u',
-  'v' = 'v',
-  'w' = 'w',
-  'x' = 'x',
-  'y' = 'y',
-  'z' = 'z',
-  'F1' = 'F1',
-  'F2' = 'F2',
-  'F3' = 'F3',
-  'F4' = 'F4',
-  'F5' = 'F5',
-  'F6' = 'F6',
-  'F7' = 'F7',
-  'F8' = 'F8',
-  'F9' = 'F9',
-  'F10' = 'F10',
-  'F11' = 'F11',
-  'F12' = 'F12',
-}
-
-export const KeyBoardMap = {
-  16: 'shift',
-  17: 'ctrl',
-  18: 'alt',
-
-  8: 'backspace',
-  9: 'tab',
-  13: 'enter',
-  27: 'esc',
-  32: 'space',
-  46: 'del',
-
-  37: 'left',
-  38: 'up',
-  39: 'right',
-  40: 'down',
-
-  189: 'minus',
-  187: 'equal',
-
-  48: 'num_0',
-  49: 'num_1',
-  50: 'num_2',
-  51: 'num_3',
-  52: 'num_4',
-  53: 'num_5',
-  54: 'num_6',
-  55: 'num_7',
-  56: 'num_8',
-  57: 'num_9',
-
-  65: 'a',
-  66: 'b',
-  67: 'c',
-  68: 'd',
-  69: 'e',
-  70: 'f',
-  71: 'g',
-  72: 'h',
-  73: 'i',
-  74: 'j',
-  75: 'k',
-
-  76: 'l',
-  77: 'm',
-  78: 'n',
-  79: 'o',
-  80: 'p',
-  81: 'q',
-  82: 'r',
-  83: 's',
-  84: 't',
-  85: 'u',
-  86: 'v',
-  87: 'w',
-  88: 'x',
-  89: 'y',
-  90: 'z',
-
-  112: 'F1',
-  113: 'F2',
-  114: 'F3',
-  115: 'F4',
-  116: 'F5',
-  117: 'F6',
-  118: 'F7',
-  119: 'F8',
-  120: 'F9',
-  121: 'F10',
-  122: 'F11',
-  123: 'F12',
-};
-
-export function getKey(e: KeyboardEvent | iKeyboardEvent): KEY | null {
-  // @ts-ignore
-  let key = KeyBoardMap[e.keyCode] as KEY;
-  if (!!KEY[key]) {
-    return KEY[key];
-  } else {
-    /*if (e.keyCode !== 229) {
-        console.warn(`Can't recognise key`, e)
-    }*/
-    return null;
-  }
-}
-
-export class KeyboardServiceOption {
-  [key: string]: (e?: KeyboardEvent) => (void | undefined | boolean)
-}
-
-export const KeyboardService = {
-  options: [] as KeyboardServiceOption[],
-  /*订阅点击事件*/
-  listen(option: KeyboardServiceOption) {
-    if (!option) return () => {};
-    this.options.push(option);
-    return () => void KeyboardService.unbindListener(option);
-  },
-  /*取消订阅事件*/
-  unbindListener(option: KeyboardServiceOption) {
-    let index = this.options.indexOf(option);
-    if (index > -1) {
-      this.options.splice(index, 1);
-    }
-  },
-  /*取消当前激活的元素*/
-  cancelActiveElement() {
-    const activeElement = document.activeElement as HTMLElement;
-    if (!!activeElement) activeElement.blur();
-    return activeElement;
-  },
-  /*处理window的点击事件*/
-  _onkeydown(e: KeyboardEvent) {
-    if (e.currentTarget !== e.target) return;
-    const names = [] as string[];
-    (e.metaKey || e.ctrlKey) && names.push('ctrl');
-    e.shiftKey && names.push('shift');
-    e.altKey && names.push('alt');
-    // @ts-ignore
-    names.push(KeyBoardMap[e.keyCode]);
-    const compositionKeyName = names.join('+');
-
-    const option = this.options[this.options.length - 1];
-    if (!!option && !!option[compositionKeyName]) {
-      const flag = option[compositionKeyName](e);
-      /*默认阻止事件冒泡*/
-      if (flag !== false) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    }
-  },
-};
-
-export function handleKeyboard(option: { [key in KEY]?: (e: KeyboardEvent) => any }) {
-  return (e: KeyboardEvent | iKeyboardEvent) => {
-    const key = getKey(e);
-    if (!!key && !!option[key]) {
-      return option[key]!(e as any);
-    }
-  };
-}
-
-document.body.addEventListener('keydown', e => KeyboardService._onkeydown(e));
-
-export default KeyboardService;
+import {iKeyboardEvent} from "plain-design-composition";
+
+export enum KEY {
+  'shift' = 'shift',
+  'ctrl' = 'ctrl',
+  'alt' = 'alt',
+  'backspace' = 'backspace',
+  'tab' = 'tab',
+  'enter' = 'enter',
+  'esc' = 'esc',
+  'space' = 'space',
+  'del' = 'del',
+  'left' = 'left',
+  'up' = 'up',
+  'right' = 'right',
+  'down' = 'down',
+  'minus' = 'minus',
+  'equal' = 'equal',
+  'num_0' = 'num_0',
+  'num_1' = 'num_1',
+  'num_2' = 'num_2',
+  'num_3' = 'num_3',
+  'num_4' = 'num_4',
+  'num_5' = 'num_5',
+  'num_6' = 'num_6',
+  'num_7' = 'num_7',
+  'num_8' = 'num_8',
+  'num_9' = 'num_9',
+  'a' = 'a',
+  'b' = 'b',
+  'c' = 'c',
+  'd' = 'd',
+  'e' = 'e',
+  'f' = 'f',
+  'g' = 'g',
+  'h' = 'h',
+  'i' = 'i',
+  'j' = 'j',
+  'k' = 'k',
+  'l' = 'l',
+  'm' = 'm',
+  'n' = 'n',
+  'o' = 'o',
+  'p' = 'p',
+  'q' = 'q',
+  'r' = 'r',
+  's' = 's',
+  't' = 't',
+  'u' = 'u',
+  'v' = 'v',
+  'w' = 'w',
+  'x' = 'x',
+  'y' = 'y',
+  'z' = 'z',
+  'F1' = 'F1',
+  'F2' = 'F2',
+  'F3' = 'F3',
+  'F4' = 'F4',
+  'F5' = 'F5',
+  'F6' = 'F6',
+  'F7' = 'F7',
+  'F8' = 'F8',
+  'F9' = 'F9',
+  'F10' = 'F10',
+  'F11' = 'F11',
+  'F12' = 'F12',
+}
+
+export const KeyBoardMap = {
+  16: 'shift',
+  17: 'ctrl',
+  18: 'alt',
+
+  8: 'backspace',
+  9: 'tab',
+  13: 'enter',
+  27: 'esc',
+  32: 'space',
+  46: 'del',
+
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+
+  189: 'minus',
+  187: 'equal',
+
+  48: 'num_0',
+  49: 'num_1',
+  50: 'num_2',
+  51: 'num_3',
+  52: 'num_4',
+  53: 'num_5',
+  54: 'num_6',
+  55: 'num_7',
+  56: 'num_8',
+  57: 'num_9',
+
+  65: 'a',
+  66: 'b',
+  67: 'c',
+  68: 'd',
+  69: 'e',
+  70: 'f',
+  71: 'g',
+  72: 'h',
+  73: 'i',
+  74: 'j',
+  75: 'k',
+
+  76: 'l',
+  77: 'm',
+  78: 'n',
+  79: 'o',
+  80: 'p',
+  81: 'q',
+  82: 'r',
+  83: 's',
+  84: 't',
+  85: 'u',
+  86: 'v',
+  87: 'w',
+  88: 'x',
+  89: 'y',
+  90: 'z',
+
+  112: 'F1',
+  113: 'F2',
+  114: 'F3',
+  115: 'F4',
+  116: 'F5',
+  117: 'F6',
+  118: 'F7',
+  119: 'F8',
+  120: 'F9',
+  121: 'F10',
+  122: 'F11',
+  123: 'F12',
+};
+
+export function getKey(e: KeyboardEvent | iKeyboardEvent): KEY | null {
+  // @ts-ignore
+  let key = KeyBoardMap[e.keyCode] as KEY;
+  if (!!KEY[key]) {
+    return KEY[key];
+  } else {
+    /*if (e.keyCode !== 229) {
+        console.warn(`Can't recognise key`, e)
+    }*/
+    return null;
+  }
+}
+
+export class KeyboardServiceOption {
+  [key: string]: (e?: KeyboardEvent) => (void | undefined | boolean)
+}
+
+export const KeyboardService = {
+  options: [] as KeyboardServiceOption[],
+  /*订阅点击事件*/
+  listen(option: KeyboardServiceOption) {
+    if (!option) return () => {};
+    this.options.push(option);
+    return () => void KeyboardService.unbindListener(option);
+  },
+  /*取消订阅事件*/
+  unbindListener(option: KeyboardServiceOption) {
+    let index = this.options.indexOf(option);
+    if (index > -1) {
+      this.options.splice(index, 1);
+    }
+  },
+  /*取消当前激活的元素*/
+  cancelActiveElement() {
+    const activeElement = document.activeElement as HTMLElement;
+    if (!!activeElement) activeElement.blur();
+    return activeElement;
+  },
+  /*处理window的点击事件*/
+  _onkeydown(e: KeyboardEvent) {
+    if (e.currentTarget !== e.target) return;
+    const names = [] as string[];
+    (e.metaKey || e.ctrlKey) && names.push('ctrl');
+    e.shiftKey && names.push('shift');
+    e.altKey && names.push('alt');
+    // @ts-ignore
+    names.push(KeyBoardMap[e.keyCode]);
+    const compositionKeyName = names.join('+');
+
+    const option = this.options[this.options.length - 1];
+    if (!!option && !!option[compositionKeyName]) {
+      const flag = option[compositionKeyName](e);
+      /*默认阻止事件冒泡*/
+      if (flag !== false) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+  },
+};
+
+export function handleKeyboard(option: { [key in KEY]?: (e: KeyboardEvent) => any }) {
+  return (e: KeyboardEvent | iKeyboardEvent) => {
+    const key = getKey(e);
+    if (!!key && !!option[key]) {
+      return option[key]!(e as any);
+    }
+  };
+}
+
+document.body.addEventListener('keydown', e => KeyboardService._onkeydown(e));
+
+export default KeyboardService;

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

@@ -1,74 +1,74 @@
-import {designComponent, getComponentCls, PropType, useRefs} from "plain-design-composition";
-import React, {ReactElement} from "react";
-import FlipMove from "react-flip-move";
-import './list.scss';
-
-export const List = designComponent({
-  props: {
-    tag: { type: String, default: 'div' },
-    easing: { type: String, default: 'cubic-bezier(0.23, 1, 0.32, 1)' },
-    duration: { type: [String, Number], default: '300ms' },
-    animation: { type: String as PropType<FlipMove.AnimationProp> },
-    enterAnimation: { type: String as PropType<FlipMove.AnimationProp> },
-    leaveAnimation: { type: String as PropType<FlipMove.AnimationProp> },
-    onStart: { type: Function as PropType<(childElement: ReactElement<any>, domNode: HTMLElement) => void> },
-    onFinish: { type: Function as PropType<(childElement: ReactElement<any>, domNode: HTMLElement) => void> },
-    onStartAll: { type: Function as PropType<(childElements: Array<ReactElement<any>>, domNodes: Array<HTMLElement>) => void> },
-    onFinishAll: { type: Function as PropType<(childElements: Array<ReactElement<any>>, domNodes: Array<HTMLElement>) => void> },
-    disableAllAnimations: { type: Boolean, default: false },
-  },
-  inheritPropsType: HTMLDivElement,
-  slots: ['default'],
-  setup({ props, slots }) {
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-    const defaultFlipAnimation = {
-      enter: {
-        from: {
-          transform: 'translateY(30px)',
-          opacity: 0.15,
-        },
-        to: {
-          transform: '',
-        },
-      },
-      leave: {
-        from: {
-          transform: '',
-        },
-        to: {
-          transform: 'translateY(-30px)',
-          opacity: 0,
-        },
-      },
-    };
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => {
-        const Tag = props.tag as any;
-        return (
-          <Tag className={getComponentCls('list')} ref={onRef.el}>
-            <FlipMove
-              typeName={null}
-              easing={props.easing}
-              duration={props.duration}
-              enterAnimation={props.enterAnimation || defaultFlipAnimation.enter}
-              leaveAnimation={props.leaveAnimation || defaultFlipAnimation.leave}
-              onStart={props.onStart}
-              onFinish={props.onFinish}
-              onStartAll={props.onStartAll}
-              onFinishAll={props.onFinishAll}
-              disableAllAnimations={props.disableAllAnimations}
-              {...{ children: slots.default() } as any}
-            />
-          </Tag>
-        );
-      }
-    };
-  },
-});
-
-export default List;
+import {designComponent, getComponentCls, PropType, useRefs} from "plain-design-composition";
+import React, {ReactElement} from "react";
+import FlipMove from "react-flip-move";
+import './list.scss';
+
+export const List = designComponent({
+  props: {
+    tag: { type: String, default: 'div' },
+    easing: { type: String, default: 'cubic-bezier(0.23, 1, 0.32, 1)' },
+    duration: { type: [String, Number], default: '300ms' },
+    animation: { type: String as PropType<FlipMove.AnimationProp> },
+    enterAnimation: { type: String as PropType<FlipMove.AnimationProp> },
+    leaveAnimation: { type: String as PropType<FlipMove.AnimationProp> },
+    onStart: { type: Function as PropType<(childElement: ReactElement<any>, domNode: HTMLElement) => void> },
+    onFinish: { type: Function as PropType<(childElement: ReactElement<any>, domNode: HTMLElement) => void> },
+    onStartAll: { type: Function as PropType<(childElements: Array<ReactElement<any>>, domNodes: Array<HTMLElement>) => void> },
+    onFinishAll: { type: Function as PropType<(childElements: Array<ReactElement<any>>, domNodes: Array<HTMLElement>) => void> },
+    disableAllAnimations: { type: Boolean, default: false },
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  setup({ props, slots }) {
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const defaultFlipAnimation = {
+      enter: {
+        from: {
+          transform: 'translateY(30px)',
+          opacity: 0.15,
+        },
+        to: {
+          transform: '',
+        },
+      },
+      leave: {
+        from: {
+          transform: '',
+        },
+        to: {
+          transform: 'translateY(-30px)',
+          opacity: 0,
+        },
+      },
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => {
+        const Tag = props.tag as any;
+        return (
+          <Tag className={getComponentCls('list')} ref={onRef.el}>
+            <FlipMove
+              typeName={null}
+              easing={props.easing}
+              duration={props.duration}
+              enterAnimation={props.enterAnimation || defaultFlipAnimation.enter}
+              leaveAnimation={props.leaveAnimation || defaultFlipAnimation.leave}
+              onStart={props.onStart}
+              onFinish={props.onFinish}
+              onStartAll={props.onStartAll}
+              onFinishAll={props.onFinishAll}
+              disableAllAnimations={props.disableAllAnimations}
+              {...{ children: slots.default() } as any}
+            />
+          </Tag>
+        );
+      }
+    };
+  },
+});
+
+export default List;

package/src/packages/components/List/list.scss

@@ -1,3 +1,3 @@
-@include prefix(list) {
-  position: relative;
-}
+@include prefix(list) {
+  position: relative;
+}