feat(style): 组件样式抽离

- ActionSheet
- Calendar
- Flex
- List
- SwipeAction
- Modal

src/app.js

@@ -26,10 +26,10 @@ class App extends Component {
       'pages/view/steps/index',
       'pages/view/curtain/index',
       'pages/action/toast/index',
-      // 'pages/action/modal/index',
+      'pages/action/modal/index',
       'pages/action/progress/index',
-      // 'pages/action/action-sheet/index',
-      // 'pages/action/swipe-action/index',
+      'pages/action/action-sheet/index',
+      'pages/action/swipe-action/index',
       'pages/action/activity-indicator/index',
       'pages/action/message/index',
       'pages/navigation/drawer/index',
@@ -39,11 +39,11 @@ class App extends Component {
       'pages/navigation/segmented-control/index',
       'pages/navigation/navbar/index',
       'pages/navigation/indexes/index',
-      // 'pages/layout/flex/index',
+      'pages/layout/flex/index',
       'pages/layout/grid/index',
       'pages/layout/float-layout/index',
       'pages/layout/card/index',
-      // 'pages/layout/list/index',
+      'pages/layout/list/index',
       'pages/layout/accordion/index',
       'pages/form/checkbox/index',
       'pages/form/input/index',
@@ -57,8 +57,8 @@ class App extends Component {
       'pages/form/slider/index',
       'pages/form/search-bar/index',
       'pages/form/image-picker/index',
-      'pages/form/range/index'
-      // 'pages/advanced/calendar/index'
+      'pages/form/range/index',
+      'pages/advanced/calendar/index'
     ],
     window: {
       backgroundTextStyle: 'light',

src/components/action-sheet/body/index.js

@@ -4,8 +4,6 @@ import { View } from '@tarojs/components'
 
 import AtComponent from '../../../common/component'
 
-import './index.scss'
-
 export default class AtActionSheetBody extends AtComponent {
   render () {
     const rootClass = classNames('at-action-sheet-body', this.props.className)

src/components/action-sheet/body/item/index.js

@@ -1,14 +1,10 @@
 import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
-
 import PropTypes from 'prop-types'
 import _isFunction from 'lodash/isFunction'
-
 import AtComponent from '../../../../common/component'
 
-import './index.scss'
-
 export default class AtActionSheetItem extends AtComponent {
   handleClick = (...args) => {
     if (_isFunction(this.props.onClick)) {

src/components/action-sheet/footer/index.js

@@ -1,14 +1,11 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
-
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 
 import AtComponent from '../../../common/component'
 
-import './index.scss'
-
 export default class AtActionSheetFooter extends AtComponent {
   handleClick = (...args) => {
     if (_isFunction(this.props.onClick)) {

src/components/action-sheet/header/index.js

@@ -4,8 +4,6 @@ import { View, Text } from '@tarojs/components'
 
 import AtComponent from '../../../common/component'
 
-import './index.scss'
-
 export default class AtActionSheetHeader extends AtComponent {
   render () {
     const rootClass = classNames('at-action-sheet-header', this.props.className)

src/components/action-sheet/index.js

@@ -1,18 +1,14 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
-
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 
 import AtActionSheetBody from './body/index'
 import AtActionSheetHeader from './header/index'
 import AtActionSheetFooter from './footer/index'
-
 import AtComponent from '../../common/component'
 
-import './index.scss'
-
 export default class AtActionSheet extends AtComponent {
   constructor (props) {
     super(...arguments)

src/components/calendar/body/index.tsx

@@ -16,8 +16,6 @@ import { Props, State, ListGroup } from './interface'
 
 import { delayQuerySelector } from '../../../common/utils'
 
-import './index.scss'
-
 const ANIMTE_DURATION: number = 300
 
 const defaultProps: Partial<Props> = {
@@ -34,6 +32,7 @@ export default class AtCalendarBody extends Taro.Component<
   Props,
   Readonly<State>
   > {
+  static options = { addGlobalClass: true }
   static defaultProps: Partial<Props> = defaultProps
 
   private changeCount: number = 0

src/components/calendar/controller/index.tsx

@@ -1,14 +1,12 @@
 import dayjs, { Dayjs } from 'dayjs'
 import classnames from 'classnames'
-
 import Taro from '@tarojs/taro'
 import { Text, View, Picker } from '@tarojs/components'
-
 import { Props, State } from './interface'
 
-import './index.scss'
-
 export default class AtCalendarController extends Taro.Component<Props, State> {
+  static options = { addGlobalClass: true }
+
   render () {
     const {
       generateDate,

src/components/calendar/index.tsx

@@ -16,8 +16,6 @@ import AtCalendarController from './controller/index'
 
 import { DefaultProps, Props, State, PropsWithDefaults } from './interface'
 
-import './index.scss'
-
 const defaultProps: DefaultProps = {
   marks: [],
   isSwiper: true,
@@ -31,6 +29,7 @@ const defaultProps: DefaultProps = {
 }
 
 export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
+  static options = { addGlobalClass: true }
   static defaultProps: DefaultProps = defaultProps
 
   constructor (props: Props) {