feat: ActionSheet component

2020-07-06 16:31:59 +08:00
parent 2539a548b6
commit aa09ba0fd9
12 changed files with 1090 additions and 11 deletions
@@ -0,0 +1,167 @@
+// Utils
+import { createNamespace } from '../utils';
+
+// Mixins
+import { popupMixinProps } from '../mixins/popup';
+
+// Components
+import Icon from '../icon';
+import Popup from '../popup';
+import Loading from '../loading';
+
+const [createComponent, bem] = createNamespace('action-sheet');
+
+export default createComponent({
+  props: {
+    ...popupMixinProps,
+    title: String,
+    actions: Array,
+    duration: [Number, String],
+    cancelText: String,
+    description: String,
+    getContainer: [String, Function],
+    closeOnPopstate: Boolean,
+    closeOnClickAction: Boolean,
+    round: {
+      type: Boolean,
+      default: true,
+    },
+    closeIcon: {
+      type: String,
+      default: 'cross',
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
+    overlay: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['close', 'cancel', 'select', 'update:show'],
+
+  setup(props, { slots, emit }) {
+    function onCancel() {
+      emit('update:show', false);
+      emit('cancel');
+    }
+
+    function onToggle(show) {
+      emit('update:show', show);
+    }
+
+    return function () {
+      const { title, cancelText } = props;
+
+      function Header() {
+        if (title) {
+          return (
+            <div class={bem('header')}>
+              {title}
+              <Icon
+                name={props.closeIcon}
+                class={bem('close')}
+                onClick={onCancel}
+              />
+            </div>
+          );
+        }
+      }
+
+      function Content() {
+        if (slots.default) {
+          return <div class={bem('content')}>{slots.default()}</div>;
+        }
+      }
+
+      function Option(item, index) {
+        const { disabled, loading, callback } = item;
+
+        function onClickOption(event) {
+          event.stopPropagation();
+
+          if (disabled || loading) {
+            return;
+          }
+
+          if (callback) {
+            callback(item);
+          }
+
+          emit('select', item, index);
+
+          if (props.closeOnClickAction) {
+            emit('update:show', false);
+          }
+        }
+
+        function OptionContent() {
+          if (loading) {
+            return <Loading size="20px" />;
+          }
+
+          return [
+            <span class={bem('name')}>{item.name}</span>,
+            item.subname && <span class={bem('subname')}>{item.subname}</span>,
+          ];
+        }
+
+        return (
+          <button
+            type="button"
+            class={[bem('item', { disabled, loading }), item.className]}
+            style={{ color: item.color }}
+            onClick={onClickOption}
+          >
+            {OptionContent()}
+          </button>
+        );
+      }
+
+      function CancelText() {
+        if (cancelText) {
+          return [
+            <div class={bem('gap')} />,
+            <button type="button" class={bem('cancel')} onClick={onCancel}>
+              {cancelText}
+            </button>,
+          ];
+        }
+      }
+
+      const Description = props.description && (
+        <div class={bem('description')}>{props.description}</div>
+      );
+
+      return (
+        <Popup
+          class={bem()}
+          position="bottom"
+          show={props.show}
+          round={props.round}
+          overlay={props.overlay}
+          duration={props.duration}
+          lazyRender={props.lazyRender}
+          lockScroll={props.lockScroll}
+          getContainer={props.getContainer}
+          closeOnPopstate={props.closeOnPopstate}
+          closeOnClickOverlay={props.closeOnClickOverlay}
+          safeAreaInsetBottom={props.safeAreaInsetBottom}
+          {...{ 'onUpdate:show': onToggle }}
+        >
+          {Header()}
+          {Description}
+          {props.actions && props.actions.map(Option)}
+          {Content()}
+          {CancelText()}
+        </Popup>
+      );
+    };
+  },
+});