feat(meet): add meet components (#657)

packages/meet/.npmignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+build
+__tests__

packages/meet/LESENCE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/meet/README.md

@@ -0,0 +1,9 @@
+# @formily/meet
+
+### Install
+
+```bash
+npm install --save @formily/meet
+```
+
+

packages/meet/README.zh-cn.md

@@ -0,0 +1,8 @@
+# @formily/meet
+
+### 安装
+
+```bash
+npm install --save @formily/meet
+```
+

packages/meet/build.json

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    [
+      "rax-plugin-app",
+      {
+        "targets": [
+          "web"
+        ]
+      }
+    ],
+    "rax-plugin-compat-react"
+  ]
+}

packages/meet/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@formily/next",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "lib",
+  "module": "esm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/formily.git"
+  },
+  "types": "esm/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/alibaba/formily/issues"
+  },
+  "homepage": "https://github.com/alibaba/formily#readme",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "scripts": {
+    "build": "ts-node --project ../../tsconfig.build.json build.ts"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.4.4",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@alifd/meet": "^1.0.0-beta.25",
+    "@formily/react": "^0.4.4",
+    "@formily/types": "^0.4.4",
+    "@formily/utils": "^0.4.4",
+    "@formily/react-schema-renderer": "^1.0.0-rc.4",
+    "@formily/react-shared-components": "^1.0.0-rc.4",
+    "@formily/shared": "^1.0.0-rc.4",
+    "classnames": "^2.2.6",
+    "styled-components": "^4.1.1",
+    "@rax-ui/locale": "^1.0.0-beta.10",
+    "rax-plugin-app": "^0.2.19",
+    "rax": "^1.1.1",
+    "rax-app": "^0.1.0",
+    "rax-dom": "^1.0.1",
+    "rax-image": "^1.0.3",
+    "rax-link": "^1.0.1",
+    "rax-recyclerview": "^1.1.1",
+    "rax-text": "^1.0.0",
+    "rax-view": "^1.0.0",
+    "universal-navigate": "^1.0.0"
+  },
+  "devDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "4d068dad6183e8da294a4c899a158326c0b0b050"
+}

packages/meet/src/adaptor/Form.tsx

@@ -0,0 +1,19 @@
+import React, { createElement } from 'react'
+import { Form } from '@alifd/meet'
+import { IFormItemTopProps } from '../types'
+import { FormItemProvider } from './context'
+import { normalizeCol } from '../shared'
+
+export const CompatNextForm: React.FC<
+  IFormItemTopProps
+> = props => {
+  return (
+    <FormItemProvider {...props}>
+      <Form
+        {...props}
+        labelCol={normalizeCol(props.labelCol)}
+        wrapperCol={normalizeCol(props.wrapperCol)}
+      />
+    </FormItemProvider>
+  )
+}

packages/meet/src/adaptor/FormItem.tsx

@@ -0,0 +1,121 @@
+import React, { createContext } from 'react'
+import { Form } from '@alifd/meet'
+import { useFormItem } from './context'
+import { IFormItemTopProps, ICompatItemProps } from '../types'
+import { normalizeCol } from '../shared'
+import { useContext } from 'react'
+
+const computeStatus = (props: ICompatItemProps) => {
+  if (props.loading) {
+    return 'loading'
+  }
+  if (props.invalid) {
+    return 'error'
+  }
+  //todo:暂时不支持
+  // if (props.warnings.length) {
+  //   return 'warning'
+  // }
+}
+
+const computeHelp = (props: ICompatItemProps) => {
+  if (props.help) return props.help
+  const messages = [].concat(props.errors || [], props.warnings || [])
+  return messages.length ? messages : props.schema && props.schema.description
+}
+
+const computeLabel = (props: ICompatItemProps) => {
+  if (props.label) return props.label
+  if (props.schema && props.schema.title) {
+    return props.schema.title
+  }
+}
+
+const computeExtra = (props: ICompatItemProps) => {
+  if (props.extra) return props.extra
+}
+
+function pickProps<T = {}>(obj: T, ...keys: (keyof T)[]): Pick<T, keyof T> {
+  const result: Pick<T, keyof T> = {} as any
+  for (let i = 0; i < keys.length; i++) {
+    if (obj[keys[i]] !== undefined) {
+      result[keys[i]] = obj[keys[i]]
+    }
+  }
+  return result
+}
+
+const computeSchemaExtendProps = (
+  props: ICompatItemProps
+): IFormItemTopProps => {
+  if (props.schema) {
+    return pickProps(
+      {
+        ...props.schema.getExtendsItemProps(),
+        ...props.schema.getExtendsProps()
+      },
+      'prefix',
+      'labelAlign',
+      'labelTextAlign',
+      'size',
+      'labelWidth',
+      'labelCol',
+      'wrapperCol'
+    )
+  }
+}
+
+const FormItemPropsContext = createContext({})
+
+export const FormItemProps = ({ children, ...props }) => (
+  <FormItemPropsContext.Provider value={props}>
+    {children}
+  </FormItemPropsContext.Provider>
+)
+
+export const CompatNextFormItem: React.FC<ICompatItemProps> = props => {
+  const {
+    prefix,
+    labelAlign,
+    labelWidth,
+    labelCol: contextLabelCol,
+    labelTextAlign,
+    wrapperCol: contextWrapperCol,
+    size
+  } = useFormItem()
+
+
+  const formItemProps = useContext(FormItemPropsContext)
+  const help = computeHelp(props)
+  const label = computeLabel(props)
+  const status = computeStatus(props)
+  const extra = computeExtra(props)
+  const itemProps = computeSchemaExtendProps(props)
+  const mergedProps = {
+    ...itemProps,
+  }
+  const { labelCol, wrapperCol } = mergedProps;
+  return (
+    <Form.Item
+      prefix={prefix}
+      label={label}
+      labelTextAlign={labelTextAlign}
+      labelWidth={labelWidth}
+      labelAlign={labelAlign || 'left'}
+      required={props.required}
+      size={size}
+      last={true}
+      errorText={help}
+      validateState={status}
+      extra={<p>{extra}</p>}
+      labelCol={label ? normalizeCol(labelCol || contextLabelCol) : undefined}
+      wrapperCol={
+        label ? normalizeCol(wrapperCol || contextWrapperCol) : undefined
+      }
+      {...itemProps}
+      {...formItemProps}
+    >
+      <FormItemProps>{props.children}</FormItemProps>
+    </Form.Item>
+  )
+}

packages/meet/src/adaptor/context.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext } from 'react'
+import { IFormItemTopProps } from '../types'
+
+const FormItemContext = createContext<IFormItemTopProps>({})
+
+export const FormItemProvider: React.FC<IFormItemTopProps> = ({
+  children,
+  prefix,
+  size,
+  labelAlign,
+  labelCol,
+  inline,
+  labelTextAlign,
+  wrapperCol,
+  labelWidth
+}) => (
+    <FormItemContext.Provider
+      value={{
+        prefix,
+        labelAlign,
+        labelCol,
+        labelTextAlign,
+        labelWidth,
+        wrapperCol,
+        size,
+        inline
+      }}
+    >
+      {children}
+    </FormItemContext.Provider>
+  )
+
+FormItemProvider.displayName = 'FormItemProvider'
+
+export const useFormItem = () => {
+  return useContext(FormItemContext)
+}

packages/meet/src/adaptor/index.ts

@@ -0,0 +1,12 @@
+import {
+  registerFormComponent,
+  registerFormItemComponent
+} from '@formily/react-schema-renderer'
+import { CompatNextForm } from './Form'
+import { CompatNextFormItem } from './FormItem'
+
+registerFormComponent(CompatNextForm)
+
+registerFormItemComponent(CompatNextFormItem)
+
+export { CompatNextForm, CompatNextFormItem }