feat(react): add mobile mode in tiny react alert (#550)

* feat(react): add mobile mode in tiny react alert

* feat(react): adjust indent spaces to 2

packages/react/src/alert/package.json

@@ -13,6 +13,7 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/react-common": "workspace:~",
     "@opentiny/react-icon": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~"
   }
 }

packages/react/src/alert/src/index.ts

@@ -1,4 +1,5 @@
 import pc from './pc.jsx'
+import mobile from './mobile.jsx'
 import mobileFirst from './mobile-first.jsx'
 
 export default function (props) {
@@ -8,6 +9,7 @@ export default function (props) {
 
   const S = ({
     pc,
+    mobile,
     'mobile-first': mobileFirst
   })[tiny_mode]
 

packages/react/src/alert/src/mobile.jsx

@@ -0,0 +1,93 @@
+import { renderless, api } from '@opentiny/vue-renderless/alert/vue'
+import { IconClose, IconSuccess, IconError, IconHelp, IconWarning, IconChevronDown } from '@opentiny/react-icon'
+import {
+  vc,
+  If,
+  Component,
+  Slot,
+  useSetup,
+  useVm,
+} from '@opentiny/react-common'
+import '@opentiny/vue-theme-mobile/alert/index.less'
+
+const $constants = {
+  ICON_MAP: {
+    success: IconSuccess,
+    error: IconError,
+    info: IconHelp,
+    warning: IconWarning
+  },
+  TITLE_MAP: {
+    success: 'ui.alert.success',
+    error: 'ui.alert.error',
+    info: 'ui.alert.info',
+    warning: 'ui.alert.warning'
+  },
+  CONTENT_MAXHEUGHT: 252
+}
+
+export default function Alert(props) {
+  const {
+    type = 'success',
+    size = 'normal',
+    showIcon = true,
+    closable = true,
+    closeText,
+    _constants = $constants,
+    description = ''
+  } = props;
+
+  const defaultProps = Object.assign({
+    type,
+    size,
+    showIcon,
+    closable,
+    _constants
+  }, props);
+
+  const {
+    ref,
+    current: vm,
+    parent
+  } = useVm()
+
+  const {
+    state,
+    handleClose
+  } = useSetup({
+    props: defaultProps,
+    renderless,
+    api,
+    vm,
+    parent,
+    constants: _constants,
+  })
+
+  return (<div ref={ref}>
+    <If
+      v-if={state.show}
+    >
+      <div
+        className={vc(['tiny-mobile-alert', 'tiny-mobile-alert--' + type, 'tiny-mobile-alert--' + size, 'is-center'])}
+      >
+        <Component
+          v-if={showIcon}
+          is={state.getIcon}
+          className='tiny-mobile-alert__icon'
+        />
+        <div className={vc([['tiny-mobile-alert__content', { 'is-hideicon': !showIcon }]])}>
+          <Slot {...props}>{description}</Slot>
+        </div>
+        <If v-if={!closeText && closable}>
+          <IconClose
+            onClick={handleClose}
+            className="tiny-mobile-alert__icon tiny-mobile-alert__close"
+          />
+        </If>
+        <If v-if={closeText && closable}>
+          <span onClick={handleClose} className='is-custom'>{closeText}</span>
+        </If>
+      </div>
+    </If>
+  </div>)
+}