Zhaohui/action sheet

README.md

@@ -73,7 +73,7 @@ const App = () => {
 
 ### Action Components
 
-- [ ] ActionSheet
+- [x] ActionSheet
 - [ ] Dialog
 - [ ] DropdownMenu
 - [ ] Loading

src/components/ActionSheet/ActionSheet.tsx

@@ -0,0 +1,135 @@
+/*
+ * @Author: zhaohui
+ * @Date: 2021-05-29 12:11:37
+ * @LastEditTime: 2021-05-30 15:45:07
+ * @LastEditors: zhaohui
+ * @Description:
+ * @FilePath: /vant-react/src/components/ActionSheet/ActionSheet.tsx
+ */
+import React from 'react';
+import { ActionSheetProps, ActionItem, BaseClass } from './types';
+import classnames from '../../utils/classNames';
+import { renderLoadingIcon } from '../Button/helper';
+import Icon from '../Icons';
+import './index.scss';
+
+const ActionSheet = ({
+  actions,
+  cancelText,
+  description,
+  cancelClick,
+  closeIcon,
+  closeable,
+  title
+}: ActionSheetProps) => {
+  const containerStyle = {
+    className: classnames(`${BaseClass}__container`, []),
+    style: {}
+  };
+  const actionCon = {
+    className: classnames(`${BaseClass}__action__con`, []),
+    style: {}
+  };
+  const actionDescription = {
+    className: classnames(`${BaseClass}__description`, []),
+    style: {}
+  };
+  const actionItem = {
+    className: classnames(`${BaseClass}__action__item`, []),
+    style: {}
+  };
+  const actionItemSubName = {
+    className: classnames(`${BaseClass}__action__item__subName`, []),
+    style: {}
+  };
+  const _closeIcon = {
+    className: classnames(`${BaseClass}__close`, []),
+    style: {}
+  };
+  const _titleStyle = {
+    className: classnames(`${BaseClass}__title`, []),
+    style: {}
+  };
+  return (
+    <div {...containerStyle}>
+      {closeable && (
+        <div
+          {...Object.assign({}, _closeIcon, {
+            onClick: () => cancelClick && cancelClick()
+          })}
+        >
+          {typeof closeIcon === 'string' ? (
+            <Icon name={closeIcon} />
+          ) : (
+            <Icon name='cross' />
+          )}
+        </div>
+      )}
+
+      <div {...actionCon}>
+        {title && typeof title === 'string' ? (
+          <div {..._titleStyle}>{title}</div>
+        ) : (
+          title
+        )}
+        {description && typeof description === 'string' ? (
+          <div {...actionDescription}>{description}</div>
+        ) : (
+          description
+        )}
+        {actions &&
+          actions.map((item: ActionItem) => (
+            <button
+              disabled={item.disabled}
+              {...{
+                className: classnames(`${BaseClass}__action__item`, [
+                  {
+                    [item.className || '']: true
+                  }
+                ]),
+                style: {}
+              }}
+              key={item.value}
+              onClick={() => item.callback && item.callback(item)}
+            >
+              <div
+                {...{
+                  className: classnames(`${BaseClass}__action__item__name`, [
+                    {
+                      danger: item.danger
+                    }
+                  ])
+                }}
+              >
+                <span>{!item.loading && item.name}</span>{' '}
+                {item.loading &&
+                  renderLoadingIcon({
+                    loadingType: item.loadingType || 'circular',
+                    className: `${BaseClass}__action__item__loading`,
+                    loadingSize: 'large'
+                  })}
+              </div>
+              <div {...actionItemSubName}>{item.subname && item.subname}</div>
+            </button>
+          ))}
+        {cancelText && <div className={`${BaseClass}__gap`} />}
+        {cancelText && typeof cancelText === 'string' ? (
+          <button
+            {...Object.assign({}, actionItem, {
+              style: {
+                color: '#969799',
+                fontSize: '14px'
+              },
+              onClick: () => cancelClick && cancelClick()
+            })}
+          >
+            {cancelText}
+          </button>
+        ) : (
+          cancelText
+        )}
+      </div>
+    </div>
+  );
+};
+export default ActionSheet;

src/components/ActionSheet/index.scss

@@ -0,0 +1,80 @@
+@import '../../styles/colors.scss';
+
+$baseClass: 'vant-action-sheet';
+
+* {
+  box-sizing: border-box;
+}
+.#{$baseClass}__gap {
+  height: 8px;
+  background: $grey-background;
+}
+.#{$baseClass}__close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  color: $placeholder;
+  font-size: 22px;
+  cursor: pointer;
+}
+.#{$baseClass}__title {
+  flex-shrink: 0;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 48px;
+  text-align: center;
+}
+.#{$baseClass}__container {
+  position: relative;
+  width: 100vw;
+  .#{$baseClass}__action__con {
+    display: flex;
+    flex-direction: column;
+    justify-items: start;
+    text-align: center;
+    .#{$baseClass}__cancel {
+      background: #000;
+    }
+    .#{$baseClass}__description {
+      padding: 20px;
+      color: $grey;
+      font-size: 14px;
+      border-bottom: 1px solid $grey-background;
+    }
+    .#{$baseClass}__action__item {
+      line-height: 22px;
+      display: block;
+      width: 100%;
+      padding: 14px 16px;
+      font-size: 16px;
+      background-color: #fff;
+      border: none;
+      cursor: pointer;
+      &:active {
+        background-color: $grey-background;
+      }
+
+      .#{$baseClass}__action__item__name {
+        font-size: 16px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        &__danger {
+          color: $danger;
+        }
+        .loading {
+          svg {
+            circle {
+              stroke: #c8c9cc !important;
+            }
+          }
+        }
+      }
+      .#{$baseClass}__action__item__subName {
+        font-size: 12px;
+        color: $grey;
+      }
+    }
+  }
+}