feat(react): add badge comp with mobile & pc mode (#566)

packages/react/src/badge/index.ts

@@ -0,0 +1,3 @@
+import Badge from './src/index'
+
+export default Badge

packages/react/src/badge/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@opentiny/react-badge",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~",
+    "@opentiny/react-common": "workspace:~",
+    "@opentiny/react-icon": "workspace:~"
+  }
+}

packages/react/src/badge/src/index.ts

@@ -0,0 +1,15 @@
+import pc from './pc.jsx'
+import mobile from './mobile.jsx'
+
+export default function (props) {
+  const {
+    tiny_mode = 'pc'
+  } = props
+
+  const S = ({
+    pc,
+    mobile
+  })[tiny_mode]
+
+  return (S(props))
+}

packages/react/src/badge/src/mobile.jsx

@@ -0,0 +1,70 @@
+import { useSetup, useVm, vc, If, Slot } from '@opentiny/react-common'
+import { api, renderless } from '@opentiny/vue-renderless/badge/vue'
+import '@opentiny/vue-theme-mobile/badge/index.less'
+
+export default function (props) {
+  const {
+    isDot = false,
+    isFixed = true,
+    isMini = false,
+    max,
+    value,
+    modelValue,
+    href,
+    target,
+    hidden = false,
+    type,
+    badgeClass,
+    offset = [0, 0]
+  } = props
+
+  const defaultProps = Object.assign({
+    isDot,
+    isFixed,
+    isMini,
+    hidden,
+    offset
+  }, props)
+
+  const {
+    ref,
+    parent,
+    current: vm
+  } = useVm()
+
+  const {
+    state
+  } = useSetup({
+    props: defaultProps,
+    api,
+    renderless,
+    vm,
+    parent
+  })
+
+  return (<div ref={ref} className='tiny-mobile-badge'>
+    <Slot parent_children={props.children}></Slot>
+    <If v-if={!hidden && (value > 0 || isDot)}>
+      <div
+        className={vc([
+          'tiny-mobile-badge__content',
+          {
+            'is-dot': isDot,
+            'is-fixed': isFixed,
+            'is-mini': isMini
+          },
+          value < 10 ? 'is-circle' : '',
+          type ? 'tiny-mobile-badge--' + type : ''
+        ])}
+      >
+        <If v-if={!isDot}>
+          <span>
+            <Slot name='content' slots={props.slots}>
+              <a href={state.href} target={target} rel='noopener noreferrer' className='tiny-mobile-badge__link'>{state.content}</a>
+            </Slot>
+          </span>
+        </If>
+      </div>
+    </If>
+  </div>)
+}

packages/react/src/badge/src/pc.jsx

@@ -0,0 +1,78 @@
+import { useSetup, useVm, vc, If, Slot } from '@opentiny/react-common'
+import { api, renderless } from '@opentiny/vue-renderless/badge/vue'
+import '@opentiny/vue-theme/badge/index.less'
+
+export default function (props) {
+  const {
+    isDot = false,
+    isFixed = true,
+    isMini = false,
+    max,
+    value,
+    modelValue,
+    href,
+    target,
+    hidden = false,
+    type,
+    badgeClass,
+    offset = [0, 0],
+    data
+  } = props
+
+  const defaultProps = Object.assign({
+    isDot,
+    isFixed,
+    isMini,
+    hidden,
+    offset
+  }, props)
+
+  const {
+    ref,
+    parent,
+    current: vm
+  } = useVm()
+
+  const {
+    state
+  } = useSetup({
+    props: defaultProps,
+    api,
+    renderless,
+    vm,
+    parent
+  })
+
+  return (
+    <div ref={ref} className='tiny-badge__wrapper'>
+      <If v-if={data}><span>{data}</span></If>
+      <Slot v-if={!data} parent_children={props.children}></Slot>
+      <If v-if={!hidden && (state.content || state.content === 0 || isDot)}>
+        <div
+          className={vc([
+            'tiny-badge',
+            isDot ? 'tiny-badge--default' : '',
+            state.isOverstep ? 'tiny-badge--max' : '',
+            type ? 'tiny-badge--' + type : '',
+            badgeClass || ''
+          ])}
+          style={{
+            transform: `translate(
+              ${offset[0]}${typeof offset[0] === 'number' ? 'px' : ''},
+              ${offset[1]}${typeof offset[1] === 'number' ? 'px' : ''}
+            )`
+          }}
+        >
+          <Slot name='content' slots={props.slots}>
+            <If v-if={state.href}>
+              <a href={state.href} target={target} rel='noopener noreferrer'>{state.content}</a>
+            </If>
+            <If v-if={!state.href}>
+              <span className='tiny-badge__content-text'>{state.content}</span>
+            </If>
+          </Slot>
+        </div>
+      </If>
+    </div>
+  )
+}