From 6bdd26976626bcca7bec5abbdfa1caa4fa9704d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E8=BE=89?= Date: Sat, 29 May 2021 13:42:51 +0800 Subject: [PATCH 1/2] chore: add ActionSheet --- README.md | 2 +- src/components/ActionSheet/ActionSheet.tsx | 14 +++++++++ src/components/ActionSheet/index.scss | 0 src/components/ActionSheet/index.stories.tsx | 32 +++++++++++++++++++ src/components/ActionSheet/index.tsx | 33 ++++++++++++++++++++ src/components/ActionSheet/types.ts | 31 ++++++++++++++++++ src/index.tsx | 13 +++++++- 7 files changed, 123 insertions(+), 2 deletions(-) create mode 100644 src/components/ActionSheet/ActionSheet.tsx create mode 100644 src/components/ActionSheet/index.scss create mode 100644 src/components/ActionSheet/index.stories.tsx create mode 100644 src/components/ActionSheet/index.tsx create mode 100644 src/components/ActionSheet/types.ts diff --git a/README.md b/README.md index 06eb91e6c..180932106 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ const App = () => { ### Action Components -- [ ] ActionSheet +- [x] ActionSheet - [ ] Dialog - [ ] DropdownMenu - [ ] Loading diff --git a/src/components/ActionSheet/ActionSheet.tsx b/src/components/ActionSheet/ActionSheet.tsx new file mode 100644 index 000000000..bfc8c5d3c --- /dev/null +++ b/src/components/ActionSheet/ActionSheet.tsx @@ -0,0 +1,14 @@ +/* + * @Author: zhaohui + * @Date: 2021-05-29 12:11:37 + * @LastEditTime: 2021-05-29 12:14:13 + * @LastEditors: zhaohui + * @Description: + * @FilePath: /vant-react/src/components/ActionSheet/ActionSheet.tsx + */ +import React from 'react'; + +const ActionSheet = () => { + return
这个是actionSheet
+} +export default ActionSheet; \ No newline at end of file diff --git a/src/components/ActionSheet/index.scss b/src/components/ActionSheet/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/ActionSheet/index.stories.tsx b/src/components/ActionSheet/index.stories.tsx new file mode 100644 index 000000000..3869f14c1 --- /dev/null +++ b/src/components/ActionSheet/index.stories.tsx @@ -0,0 +1,32 @@ +/* + * @Author: zhaohui + * @Date: 2021-05-13 18:18:19 + * @LastEditTime: 2021-05-29 12:22:25 + * @LastEditors: zhaohui + * @Description: + * @FilePath: /vant-react/src/components/ActionSheet/index.stories.tsx + */ +import React from 'react'; +import ActionSheet from '.'; +import Cell from '../Cell' +import '../../styles/stories.scss'; + +export default { + title: 'ActionSheet', + component: ActionSheet +}; + +export const ActionSheetDefault = () => { + return ( +
+ {} + }} /> + +
+ ); +}; diff --git a/src/components/ActionSheet/index.tsx b/src/components/ActionSheet/index.tsx new file mode 100644 index 000000000..b4c0da061 --- /dev/null +++ b/src/components/ActionSheet/index.tsx @@ -0,0 +1,33 @@ +/* + * @Author: zhaohui + * @Date: 2021-05-29 11:24:50 + * @LastEditTime: 2021-05-29 12:32:10 + * @LastEditors: zhaohui + * @Description: + * @FilePath: /vant-react/src/components/ActionSheet/index.tsx + */ +import React, { useState, useEffect } from 'react'; +import Popup from '../Popup'; +import { ActionSheetProps } from './types'; +import ActionSheet from '.'; + +const ActionSheetContainer = ({ visible = false }: ActionSheetProps) => { + const [_visible, set_visible] = useState(false); + const onSetActive = () => {}; + debugger; + useEffect(() => { + if (visible !== _visible) { + debugger; + set_visible(visible); + } + }, [_visible]); + return ( + onSetActive()} + content={} + /> + ); +}; +export default ActionSheetContainer; diff --git a/src/components/ActionSheet/types.ts b/src/components/ActionSheet/types.ts new file mode 100644 index 000000000..71e2c2fe6 --- /dev/null +++ b/src/components/ActionSheet/types.ts @@ -0,0 +1,31 @@ +/* + * @Author: zhaohui + * @Date: 2021-05-29 11:34:24 + * @LastEditTime: 2021-05-29 12:02:05 + * @LastEditors: zhaohui + * @Description: + * @FilePath: /vant-react/src/components/ActionSheet/types.ts + */ +export interface ActionSheetProps { + visible?: boolean; + actions?: ActionItem[]; + title?: string | React.ReactNode; + cancelText?: string | React.ReactNode; + description?: string | React.ReactNode; + closeable?: boolean; + closeIcon?: string | React.ReactNode; + duration?: number; + overlay?: boolean; + safeAreaInsetBottom?: boolean; +} + +export interface ActionItem { + name: string | React.ReactNode; + subname?: string | React.ReactNode; + color?: string; + className?: string; + loading?: boolean; + disabled?: boolean; + callback?: Function +} +export const BaseClass = 'vant-action-sheet' diff --git a/src/index.tsx b/src/index.tsx index 0c4568ca3..88998a60e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,11 @@ +/* + * @Author: zhaohui + * @Date: 2021-05-29 11:23:26 + * @LastEditTime: 2021-05-29 11:30:52 + * @LastEditors: zhaohui + * @Description: + * @FilePath: /vant-react/src/index.tsx + */ import Button from './components/Button'; import Icon from './components/Icons'; import Tag from './components/Tag'; @@ -13,6 +21,7 @@ import Checkbox from './components/Checkbox'; import Radio from './components/Radio'; import Stepper from './components/Stepper'; import Toast from './components/Toast'; +import ActionSheet from './components/ActionSheet'; export { default as Button } from './components/Button'; export { default as Icon } from './components/Icons'; @@ -29,6 +38,7 @@ export { default as Checkbox } from './components/Checkbox'; export { default as Radio } from './components/Radio'; export { default as Stepper } from './components/Stepper'; export { default as Toast } from './components/Toast'; +export { default as ActionSheet } from './components/ActionSheet'; const Vant = { Button, @@ -45,7 +55,8 @@ const Vant = { Checkbox, Radio, Stepper, - Toast + Toast, + ActionSheet }; export default Vant; From 73d2ea30334c7729df715239b4fadb470d00362c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E8=BE=89?= Date: Sun, 30 May 2021 15:52:01 +0800 Subject: [PATCH 2/2] add actionSheet --- src/components/ActionSheet/ActionSheet.tsx | 133 ++++++++++- src/components/ActionSheet/index.scss | 80 +++++++ src/components/ActionSheet/index.stories.tsx | 236 ++++++++++++++++++- src/components/ActionSheet/index.tsx | 36 +-- src/components/ActionSheet/types.ts | 45 ++-- src/index.tsx | 8 - 6 files changed, 478 insertions(+), 60 deletions(-) diff --git a/src/components/ActionSheet/ActionSheet.tsx b/src/components/ActionSheet/ActionSheet.tsx index bfc8c5d3c..ac3faf698 100644 --- a/src/components/ActionSheet/ActionSheet.tsx +++ b/src/components/ActionSheet/ActionSheet.tsx @@ -1,14 +1,135 @@ /* * @Author: zhaohui * @Date: 2021-05-29 12:11:37 - * @LastEditTime: 2021-05-29 12:14:13 + * @LastEditTime: 2021-05-30 15:45:07 * @LastEditors: zhaohui - * @Description: + * @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 = () => { - return
这个是actionSheet
-} -export default ActionSheet; \ No newline at end of file +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 ( +
+ {closeable && ( +
cancelClick && cancelClick() + })} + > + {typeof closeIcon === 'string' ? ( + + ) : ( + + )} +
+ )} + +
+ {title && typeof title === 'string' ? ( +
{title}
+ ) : ( + title + )} + {description && typeof description === 'string' ? ( +
{description}
+ ) : ( + description + )} + {actions && + actions.map((item: ActionItem) => ( + + ))} + {cancelText &&
} + {cancelText && typeof cancelText === 'string' ? ( + + ) : ( + cancelText + )} +
+
+ ); +}; +export default ActionSheet; diff --git a/src/components/ActionSheet/index.scss b/src/components/ActionSheet/index.scss index e69de29bb..3dbf5f19b 100644 --- a/src/components/ActionSheet/index.scss +++ b/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; + } + } + } +} diff --git a/src/components/ActionSheet/index.stories.tsx b/src/components/ActionSheet/index.stories.tsx index 3869f14c1..2e0237f83 100644 --- a/src/components/ActionSheet/index.stories.tsx +++ b/src/components/ActionSheet/index.stories.tsx @@ -1,15 +1,17 @@ /* * @Author: zhaohui * @Date: 2021-05-13 18:18:19 - * @LastEditTime: 2021-05-29 12:22:25 + * @LastEditTime: 2021-05-30 15:51:25 * @LastEditors: zhaohui * @Description: * @FilePath: /vant-react/src/components/ActionSheet/index.stories.tsx */ -import React from 'react'; +import React, { useState } from 'react'; import ActionSheet from '.'; -import Cell from '../Cell' +import { ActionItem } from './types'; +import Cell from '../Cell'; import '../../styles/stories.scss'; +import Toast from '../Toast'; export default { title: 'ActionSheet', @@ -17,16 +19,232 @@ export default { }; export const ActionSheetDefault = () => { + const [visible, setVisible] = useState(false); + const actions: ActionItem[] = [ + { + name: 'Option1', + value: 1, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisible(false); + } + }, + { + name: 'Option2', + value: 2, + subname: 'This is a description', + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisible(false); + } + } + ]; return (
- {} - }} /> - + fontSize: '12px' + }, + onClick: () => { + setVisible(true); + } + }} + /> + setVisible(false)} + actions={actions} + /> +
+ ); +}; +export const ActionSheetWithStatus = () => { + const [visible, setVisible] = useState(false); + const actions: ActionItem[] = [ + { + name: 'Disabled', + value: 1, + disabled: true, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisible(false); + } + }, + { + name: 'Loading...', + value: 2, + loading: true, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisible(false); + } + }, + { + name: 'Danger...', + value: 3, + danger: true, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisible(false); + } + } + ]; + return ( +
+ { + setVisible(true); + } + }} + /> + setVisible(false)} + actions={actions} + /> +
+ ); +}; +export const ActionSheetWithDiffrentButton = () => { + const [visibleTitle, setVisibleTitle] = useState(false); + const [visibleDescription, setVisibleDescription] = useState(false); + const [visibleCancel, setVisibleCancel] = useState(false); + const [visibleCancelIcon, setVisibleCancelIcon] = useState(false); + const actionsTitle: ActionItem[] = [ + { + name: 'Option', + value: 1, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisibleTitle(false); + } + } + ]; + const actionsCancel: ActionItem[] = [ + { + name: 'Option', + value: 1, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisibleTitle(false); + } + } + ]; + const actionsCancelIcon: ActionItem[] = [ + { + name: 'Option', + value: 1, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisibleTitle(false); + } + } + ]; + const actionTitle: ActionItem[] = [ + { + name: 'Option', + value: 1, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisibleTitle(false); + } + } + ]; + const actionsDescription: ActionItem[] = [ + { + name: 'Option', + value: 1, + callback: (item: ActionItem) => { + Toast.info({ message: item.name }); + setVisibleTitle(false); + } + } + ]; + return ( +
+ { + setVisibleTitle(true); + } + }} + /> + { + setVisibleDescription(true); + } + }} + /> + { + setVisibleCancel(true); + } + }} + /> + { + setVisibleCancelIcon(true); + } + }} + /> + setVisibleTitle(false)} + actions={actionTitle} + title='This is title' + /> + setVisibleDescription(false)} + actions={actionsDescription} + description='This is description' + /> + setVisibleCancel(false)} + actions={actionsCancel} + /> + setVisibleCancelIcon(false)} + closeable + actions={actionsCancelIcon} + /> + setVisibleCancelIcon(false)} + closeable + actions={actionsTitle} + />
); }; diff --git a/src/components/ActionSheet/index.tsx b/src/components/ActionSheet/index.tsx index b4c0da061..85d275627 100644 --- a/src/components/ActionSheet/index.tsx +++ b/src/components/ActionSheet/index.tsx @@ -1,7 +1,7 @@ /* * @Author: zhaohui * @Date: 2021-05-29 11:24:50 - * @LastEditTime: 2021-05-29 12:32:10 + * @LastEditTime: 2021-05-30 15:44:24 * @LastEditors: zhaohui * @Description: * @FilePath: /vant-react/src/components/ActionSheet/index.tsx @@ -9,25 +9,27 @@ import React, { useState, useEffect } from 'react'; import Popup from '../Popup'; import { ActionSheetProps } from './types'; -import ActionSheet from '.'; +import ActionSheet from './ActionSheet'; -const ActionSheetContainer = ({ visible = false }: ActionSheetProps) => { - const [_visible, set_visible] = useState(false); - const onSetActive = () => {}; - debugger; - useEffect(() => { - if (visible !== _visible) { - debugger; - set_visible(visible); +const ActionSheetContainer = (props: ActionSheetProps) => { + const [_visible, setVisible] = useState(false); + const _maskClick = () => { + if (props.maskClick) { + props.maskClick(); } - }, [_visible]); + }; + useEffect(() => { + setVisible(props.visible); + }); return ( - onSetActive()} - content={} - /> +
+ _maskClick()} + content={} + /> +
); }; export default ActionSheetContainer; diff --git a/src/components/ActionSheet/types.ts b/src/components/ActionSheet/types.ts index 71e2c2fe6..24d98de85 100644 --- a/src/components/ActionSheet/types.ts +++ b/src/components/ActionSheet/types.ts @@ -1,31 +1,36 @@ /* * @Author: zhaohui * @Date: 2021-05-29 11:34:24 - * @LastEditTime: 2021-05-29 12:02:05 + * @LastEditTime: 2021-05-30 14:47:58 * @LastEditors: zhaohui - * @Description: + * @Description: * @FilePath: /vant-react/src/components/ActionSheet/types.ts */ +import { LoadingTypes } from '../Button/types'; + export interface ActionSheetProps { - visible?: boolean; - actions?: ActionItem[]; - title?: string | React.ReactNode; - cancelText?: string | React.ReactNode; - description?: string | React.ReactNode; - closeable?: boolean; - closeIcon?: string | React.ReactNode; - duration?: number; - overlay?: boolean; - safeAreaInsetBottom?: boolean; + visible: boolean; + actions?: ActionItem[]; + title?: string | React.ReactNode; + cancelText?: string | React.ReactNode; + description?: string | React.ReactNode; + closeIcon?: string | React.ReactNode; + safeAreaInsetBottom?: boolean; + closeable?: boolean; + maskClick?: Function; // click mask + cancelClick?: Function; } export interface ActionItem { - name: string | React.ReactNode; - subname?: string | React.ReactNode; - color?: string; - className?: string; - loading?: boolean; - disabled?: boolean; - callback?: Function + name: string | React.ReactNode; + value: any; + subname?: string | React.ReactNode; + color?: string; + className?: string; + loading?: boolean; + loadingType?: LoadingTypes; + disabled?: boolean; + callback?: Function; + danger?: boolean; } -export const BaseClass = 'vant-action-sheet' +export const BaseClass = 'vant-action-sheet'; diff --git a/src/index.tsx b/src/index.tsx index 88998a60e..703c19ca4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,3 @@ -/* - * @Author: zhaohui - * @Date: 2021-05-29 11:23:26 - * @LastEditTime: 2021-05-29 11:30:52 - * @LastEditors: zhaohui - * @Description: - * @FilePath: /vant-react/src/index.tsx - */ import Button from './components/Button'; import Icon from './components/Icons'; import Tag from './components/Tag';