chore(ActionSheet): use tsx (#8071)

src/action-sheet/index.tsx

@@ -0,0 +1,175 @@
+import { PropType } from 'vue';
+
+// Utils
+import { createNamespace, pick } from '../utils';
+
+// Components
+import Icon from '../icon';
+import Popup, { popupSharedProps } from '../popup';
+import Loading from '../loading';
+
+const [createComponent, bem] = createNamespace('action-sheet');
+
+export type ActionSheetAction = {
+  name?: string;
+  color?: string;
+  subname?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  callback?: (action: ActionSheetAction) => void;
+  className?: any;
+};
+
+export default createComponent({
+  props: {
+    ...popupSharedProps,
+    title: String,
+    actions: Array as PropType<ActionSheetAction[]>,
+    cancelText: String,
+    description: String,
+    closeOnPopstate: Boolean,
+    closeOnClickAction: Boolean,
+    round: {
+      type: Boolean,
+      default: true,
+    },
+    closeable: {
+      type: Boolean,
+      default: true,
+    },
+    closeIcon: {
+      type: String,
+      default: 'cross',
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['select', 'cancel', 'update:show'],
+
+  setup(props, { slots, emit }) {
+    const popupPropKeys = Object.keys(popupSharedProps);
+
+    const onUpdateShow = (show: boolean) => {
+      emit('update:show', show);
+    };
+
+    const onCancel = () => {
+      onUpdateShow(false);
+      emit('cancel');
+    };
+
+    const renderHeader = () => {
+      if (props.title) {
+        return (
+          <div class={bem('header')}>
+            {props.title}
+            {props.closeable && (
+              <Icon
+                name={props.closeIcon}
+                class={bem('close')}
+                onClick={onCancel}
+              />
+            )}
+          </div>
+        );
+      }
+    };
+
+    const renderCancel = () => {
+      if (props.cancelText) {
+        return [
+          <div class={bem('gap')} />,
+          <button type="button" class={bem('cancel')} onClick={onCancel}>
+            {props.cancelText}
+          </button>,
+        ];
+      }
+    };
+
+    const renderOption = (item: ActionSheetAction, index: number) => {
+      const {
+        name,
+        color,
+        subname,
+        loading,
+        callback,
+        disabled,
+        className,
+      } = item;
+
+      const Content = loading ? (
+        <Loading class={bem('loading-icon')} />
+      ) : (
+        [
+          <span class={bem('name')}>{name}</span>,
+          subname && <div class={bem('subname')}>{subname}</div>,
+        ]
+      );
+
+      const onClick = () => {
+        if (disabled || loading) {
+          return;
+        }
+
+        if (callback) {
+          callback(item);
+        }
+
+        emit('select', item, index);
+
+        if (props.closeOnClickAction) {
+          onUpdateShow(false);
+        }
+      };
+
+      return (
+        <button
+          type="button"
+          style={{ color }}
+          class={[bem('item', { loading, disabled }), className]}
+          onClick={onClick}
+        >
+          {Content}
+        </button>
+      );
+    };
+
+    const renderDescription = () => {
+      if (props.description || slots.description) {
+        const content = slots.description
+          ? slots.description()
+          : props.description;
+        return <div class={bem('description')}>{content}</div>;
+      }
+    };
+
+    const renderOptions = () => {
+      if (props.actions) {
+        return props.actions.map(renderOption);
+      }
+    };
+
+    return () => (
+      <Popup
+        class={bem()}
+        round={props.round}
+        position="bottom"
+        {...{
+          ...pick(props, popupPropKeys),
+          'onUpdate:show': onUpdateShow,
+        }}
+      >
+        {renderHeader()}
+        {renderDescription()}
+        <div class={bem('content')}>
+          {renderOptions()}
+          {slots.default?.()}
+        </div>
+        {renderCancel()}
+      </Popup>
+    );
+  },
+});