feat(react): add switch comp with mobile & pc mode (#565)

package.json

@@ -43,7 +43,7 @@
     "dev2.7": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/vue2.7 dev",
     "dev2.7:saas": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/vue2.7 dev:saas",
     "dev:docs": "pnpm -C examples/docs docs:dev",
-    "dev:react": "pnpm build:entry-react && pnpm -C examples/react-docs run dev",
+    "dev:react": "pnpm create:mapping-react && pnpm build:entry-react && pnpm -C examples/react-docs run dev",
     "// ---------- 启动官网文档 ----------": "",
     "dev:site": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/sites start",
     "dev:open-site": "pnpm build:entry && pnpm build:component-cssvar && pnpm -C examples/sites start:open",

packages/react-common/src/index.ts

@@ -1,7 +1,7 @@
 import * as hooks from 'react'
 import { Svg } from './svg-render.jsx'
 
-import { nextTick, ref, computed, readonly, watch, onBeforeUnmount, inject } from './vue-hooks.js'
+import { nextTick, ref, computed, readonly, watch, onBeforeUnmount, inject, provide } from './vue-hooks.js'
 import { emit, on, off, once, emitEvent } from './event.js'
 import { If, Component, Slot, For, Transition } from './virtual-comp.jsx'
 import { filterAttrs, vc, getElementCssClass } from './utils.js'
@@ -20,7 +20,8 @@ const vue_hooks = {
   readonly,
   watch,
   onBeforeUnmount,
-  inject
+  inject,
+  provide
 }
 
 // emitEvent, dispath, broadcast
@@ -52,7 +53,8 @@ export const useSetup = ({
     dispath,
     broadcast,
     t() { },
-    mergeClass
+    mergeClass,
+    mode: props.tiny_mode
   }
   const sdk = render(
     props,

packages/react/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@opentiny/react-common": "workspace:~",
     "@opentiny/react-alert": "workspace:~",
-    "@opentiny/react-button": "workspace:~"
+    "@opentiny/react-button": "workspace:~",
+    "@opentiny/react-switch": "workspace:~"
   }
 }

packages/react/src/switch/index.ts

@@ -0,0 +1,3 @@
+import Switch from "./src/index"
+
+export default Switch

packages/react/src/switch/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@opentiny/react-switch",
+  "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/react-common": "workspace:~",
+    "@opentiny/react-icon": "workspace:~"
+  }
+}

packages/react/src/switch/src/index.ts

@@ -0,0 +1,27 @@
+import pc from './pc.jsx'
+
+const $constants = {
+  PC_PREFIXCLS: 'tiny-switch',
+  MOBILE_PREFIXCLS: 'tiny-mobile-switch',
+  Mode: 'pc',
+  prefixcls(mode) {
+    return mode === this.Mode ? this.PC_PREFIXCLS : this.MOBILE_PREFIXCLS
+  }
+}
+export default function (props) {
+  const {
+    tiny_mode = 'pc',
+    _constants = $constants
+  } = props || {}
+
+  const defaultProps = Object.assign({
+    _constants,
+    tiny_mode
+  }, props)
+
+  const S = ({
+    pc,
+  })[tiny_mode]
+
+  return (S && S(defaultProps))
+}

packages/react/src/switch/src/mobile.jsx

@@ -0,0 +1,62 @@
+import { useSetup, useVm, vc, If, Slot } from '@opentiny/react-common'
+import { api, renderless } from '@opentiny/vue-renderless/switch/vue'
+import '@opentiny/vue-theme-mobile/switch/index.less'
+
+export default function (props) {
+  const {
+    _constants,
+    disabled = false,
+    showText,
+    falseColor,
+    falseValue = false,
+    mini = false,
+    modelValue = false,
+    size,
+    tabindex = '1',
+    trueColor,
+    trueValue = true,
+    beforeChange,
+    displayOnly = false,
+  } = props
+
+  const defaultProps = Object.assign(
+    {
+      disabled,
+      falseValue,
+      mini,
+      modelValue,
+      tabindex,
+      trueValue,
+      displayOnly
+    },
+    props
+  )
+
+  const {
+    ref,
+    parent,
+    current: vm
+  } = useVm()
+
+  const {
+    state,
+    toggle
+  } = useSetup({
+    props: defaultProps,
+    api,
+    renderless,
+    vm,
+    parent,
+    constants: _constants
+  })
+
+  return (<span 
+    className={vc(state.wrapClasses)}
+    disabled={true}
+    tabIndex='0'
+    onClick={toggle}
+    onKeyDown={(e) => {
+      e.key === 'Enter' && toggle(e)
+    }}
+  ></span>)
+} 

packages/react/src/switch/src/pc.jsx

@@ -0,0 +1,74 @@
+import { useSetup, useVm, vc, If, Slot } from '@opentiny/react-common'
+import { api, renderless } from '@opentiny/vue-renderless/switch/vue'
+import '@opentiny/vue-theme/switch/index.less'
+
+export default function (props) {
+  const {
+    _constants,
+    disabled = false,
+    showText,
+    falseColor,
+    falseValue = false,
+    mini = false,
+    modelValue = false,
+    size,
+    tabindex = '1',
+    trueColor,
+    trueValue = true,
+    beforeChange,
+    displayOnly = false,
+  } = props
+
+  const defaultProps = Object.assign(
+    {
+      disabled,
+      falseValue,
+      mini,
+      modelValue,
+      tabindex,
+      trueValue,
+      displayOnly
+    },
+    props
+  )
+
+  const {
+    ref,
+    parent,
+    current: vm
+  } = useVm()
+
+  const {
+    state,
+    toggle
+  } = useSetup({
+    props: defaultProps,
+    api,
+    renderless,
+    vm,
+    parent,
+    constants: _constants
+  })
+
+  return (
+    <span
+      ref={ref}
+      className={vc([
+        state.wrapClasses,
+        state.showText ? 'tiny-switch__text' : ''
+      ])}
+      tabIndex={tabindex}
+      onClick={toggle}
+      onKeyDown={(e) => {
+        e.key === 'Enter' && toggle(e)
+      }}
+    >
+      <span className={state.innerClasses}>
+        <If v-if={!mini && state.showText}>
+          <Slot v-if={state.currentValue === trueValue} name='open' slots={props.slots}>ON</Slot>
+          <Slot v-if={state.currentValue === falseValue} name='close' slots={props.slots}>OFF</Slot>
+        </If>
+      </span>
+    </span>
+  )
+}