mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2025-04-06 21:40:23 +08:00
remove runtime emotion/react
This commit is contained in:
parent
4ac96e3d66
commit
668fd07c99
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { flatten } from 'lodash-es';
|
||||
import { FormControl, FormLabel, Input, Textarea, VStack } from '@chakra-ui/react';
|
||||
import { EmotionJSX } from '@emotion/css/types/jsx-namespace';
|
||||
import { TSchema } from '@sinclair/typebox';
|
||||
import { parseType, parseTypeBox } from '@sunmao-ui/runtime';
|
||||
import { eventBus } from '../../eventBus';
|
||||
@ -55,7 +54,7 @@ export const renderField = (properties: {
|
||||
</FormControl>
|
||||
);
|
||||
} else {
|
||||
const fieldArray: EmotionJSX.Element[] = flatten(
|
||||
const fieldArray: React.ReactElement[] = flatten(
|
||||
Object.keys(value || []).map((childKey, index) => {
|
||||
const childValue = (value as any)[childKey];
|
||||
return renderField({
|
||||
|
@ -11,20 +11,107 @@ export const ignoreTraitsList = [
|
||||
export const EmptyAppSchema: Application = {
|
||||
kind: 'Application',
|
||||
version: 'example/v1',
|
||||
metadata: {
|
||||
name: 'dialog_component',
|
||||
description: 'dialog component example',
|
||||
},
|
||||
metadata: { name: 'dialog_component', description: 'dialog component example' },
|
||||
spec: {
|
||||
components: [
|
||||
{
|
||||
id: 'gridLayout1',
|
||||
type: 'core/v1/grid_layout',
|
||||
id: 'input1',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
layout: [],
|
||||
variant: 'outline',
|
||||
placeholder: 'Please input value',
|
||||
size: 'md',
|
||||
isDisabled: false,
|
||||
isRequired: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/style',
|
||||
properties: {
|
||||
styleSlot: 'content',
|
||||
style: "background: red",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'input2',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
variant: 'outline',
|
||||
placeholder: 'Please input value',
|
||||
size: 'md',
|
||||
isDisabled: false,
|
||||
isRequired: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
traits: [],
|
||||
},
|
||||
{
|
||||
id: 'input3',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
variant: 'outline',
|
||||
placeholder: 'Please input value',
|
||||
size: 'md',
|
||||
isDisabled: false,
|
||||
isRequired: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
traits: [],
|
||||
},
|
||||
{
|
||||
id: 'hstack1',
|
||||
type: 'chakra_ui/v1/hstack',
|
||||
properties: { spacing: '24px' },
|
||||
traits: [],
|
||||
},
|
||||
{
|
||||
id: 'button1',
|
||||
type: 'chakra_ui/v1/button',
|
||||
properties: {
|
||||
text: { raw: 'text', format: 'plain' },
|
||||
colorScheme: 'blue',
|
||||
isLoading: false,
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: { container: { id: 'hstack1', slot: 'content' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'button2',
|
||||
type: 'chakra_ui/v1/button',
|
||||
properties: {
|
||||
text: { raw: 'text', format: 'plain' },
|
||||
colorScheme: 'blue',
|
||||
isLoading: false,
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: { container: { id: 'hstack1', slot: 'content' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'button3',
|
||||
type: 'chakra_ui/v1/button',
|
||||
properties: {
|
||||
text: { raw: 'text', format: 'plain' },
|
||||
colorScheme: 'blue',
|
||||
isLoading: false,
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: { container: { id: 'hstack1', slot: 'content' } },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
@ -18,10 +18,8 @@
|
||||
"noEmit": false,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"types": ["@emotion/react/types/css-prop"],
|
||||
"baseUrl": "./",
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "@emotion/react",
|
||||
"rootDir": "src"
|
||||
},
|
||||
"include": ["./src"]
|
||||
|
@ -31,7 +31,7 @@
|
||||
"dependencies": {
|
||||
"@chakra-ui/icons": "^1.0.15",
|
||||
"@chakra-ui/react": "^1.7.1",
|
||||
"@emotion/react": "^11",
|
||||
"@emotion/css": "^11.7.1",
|
||||
"@emotion/styled": "^11",
|
||||
"@sinclair/typebox": "^0.21.2",
|
||||
"@sunmao-ui/core": "^0.3.1",
|
||||
|
@ -5,7 +5,6 @@ import { ImplWrapper } from './services/ImplWrapper';
|
||||
import { resolveAppComponents } from './services/resolveAppComponents';
|
||||
import { AppProps, UIServices } from './types/RuntimeSchema';
|
||||
import { DebugEvent, DebugStore } from './services/DebugComponents';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
// inject modules to App
|
||||
export function genApp(services: UIServices) {
|
||||
@ -39,7 +38,7 @@ export const App: React.FC<AppProps> = props => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="App" css={css`height: 100vh; overflow: auto`}>
|
||||
<div className="App" style={{height: '100vh', overflow: 'auto'}}>
|
||||
{topLevelComponents.map(c => {
|
||||
return (
|
||||
<ImplWrapper
|
||||
|
@ -1,6 +1,6 @@
|
||||
import RGL from 'react-grid-layout';
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import 'react-grid-layout/css/styles.css';
|
||||
import 'react-resizable/css/styles.css';
|
||||
@ -36,7 +36,7 @@ const GridLayout: React.FC<RGL.ReactGridLayoutProps> = props => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} css={bgCss}>
|
||||
<div ref={ref} className={bgCss}>
|
||||
<RGL
|
||||
cols={12}
|
||||
compactType={null}
|
||||
|
@ -5,7 +5,7 @@ import { ComponentImplementation } from '../../services/registry';
|
||||
import Slot from '../_internal/Slot';
|
||||
import { pick } from 'lodash-es';
|
||||
import { GRID_HEIGHT } from '../../constants';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const CssGlobals = Type.KeyOf(
|
||||
Type.Object({
|
||||
@ -287,7 +287,7 @@ const Box: ComponentImplementation<Static<typeof StyleSchema>> = ({
|
||||
borderColor="gray.200"
|
||||
borderRadius="base"
|
||||
{...styleProps}
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { Button as BaseButton } from '@chakra-ui/react';
|
||||
import Text, { TextPropertySchema } from '../_internal/Text';
|
||||
@ -31,7 +31,7 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
|
||||
return (
|
||||
<BaseButton
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
{...{ colorScheme, isLoading }}
|
||||
|
@ -5,7 +5,7 @@ import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/re
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import Text, { TextPropertySchema } from '../_internal/Text';
|
||||
import { ColorSchemePropertySchema } from './Types/ColorScheme';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const IsDisabledSchema = Type.Optional(Type.Boolean());
|
||||
export const SizePropertySchema = Type.KeyOf(
|
||||
@ -86,7 +86,7 @@ const Checkbox: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
onChange={e => {
|
||||
setChecked(e.target.checked);
|
||||
}}
|
||||
css={css`${customStyle?.content}`}
|
||||
className={css`${customStyle?.content}`}
|
||||
>
|
||||
<Text value={text} />
|
||||
</BaseCheckbox>
|
||||
|
@ -5,7 +5,6 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import Slot from '../_internal/Slot';
|
||||
import { SizePropertySchema, IsDisabledSchema } from './Checkbox';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
const DefaultValueSchema = Type.Optional(
|
||||
Type.Array(Type.Union([Type.String(), Type.Number()]))
|
||||
@ -21,7 +20,6 @@ const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
isDisabled,
|
||||
slotsMap,
|
||||
mergeState,
|
||||
customStyle,
|
||||
}) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
useEffect(() => {
|
||||
@ -34,7 +32,6 @@ const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
defaultValue={defaultValue}
|
||||
isDisabled={isDisabled}
|
||||
onChange={val => setValue(val)}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<Slot slotsMap={slotsMap} slot="content" />
|
||||
</BaseCheckboxGroup>
|
||||
@ -66,7 +63,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: ['content'],
|
||||
styleSlots: [],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
@ -86,12 +86,12 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
onClose={() => setIsOpen(false)}
|
||||
trapFocus={false}
|
||||
portalProps={containerRef.current ? portalProps : undefined}
|
||||
css={`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
<AlertDialogOverlay {...(containerRef.current ? dialogOverlayProps : {})}>
|
||||
<AlertDialogContent {...(containerRef.current ? dialogContentProps : {})}>
|
||||
<AlertDialogContent
|
||||
className={`${customStyle?.content}`}
|
||||
{...(containerRef.current ? dialogContentProps : {})}
|
||||
>
|
||||
<AlertDialogHeader>{title}</AlertDialogHeader>
|
||||
<AlertDialogBody>
|
||||
<Slot slotsMap={slotsMap} slot="content" />
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { Divider } from '@chakra-ui/react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
|
||||
const DividerImpl: ComponentImplementation = ({customStyle}) => {
|
||||
return <Divider css={css`${customStyle?.content}`} />;
|
||||
return <Divider className={css`${customStyle?.content}`} />;
|
||||
};
|
||||
|
||||
export default {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { Type, Static } from '@sinclair/typebox';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { Button, VStack } from '@chakra-ui/react';
|
||||
@ -110,7 +110,7 @@ const FormImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
borderColor="gray.200"
|
||||
borderRadius="4"
|
||||
spacing="5"
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
|
@ -10,7 +10,7 @@ import {
|
||||
HStack,
|
||||
Text,
|
||||
} from '@chakra-ui/react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { watch } from '../../../utils/watchReactivity';
|
||||
import { ComponentImplementation } from '../../../services/registry';
|
||||
import Slot from '../../_internal/Slot';
|
||||
@ -107,7 +107,7 @@ const FormControlImpl: ComponentImplementation<{
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="end"
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { HStack as BaseHStack } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
@ -30,7 +30,7 @@ const HStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="4"
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
{...{ direction, wrap, align, justify, spacing }}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Image as BaseImage } from '@chakra-ui/react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
@ -87,7 +87,7 @@ const Image: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
`;
|
||||
return (
|
||||
<BaseImage
|
||||
css={style}
|
||||
className={style}
|
||||
src={src}
|
||||
alt={alt}
|
||||
objectFit={objectFit}
|
||||
|
@ -10,7 +10,7 @@ import {
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const AppendElementPropertySchema = Type.Union([
|
||||
Type.Object({
|
||||
@ -83,7 +83,7 @@ const Input: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
isDisabled={isDisabled}
|
||||
isRequired={isRequired}
|
||||
onChange={onChange}
|
||||
css={css`${customStyle?.content}`}
|
||||
className={css`${customStyle?.content}`}
|
||||
/>
|
||||
{right ? (
|
||||
right.type === 'addon' ? (
|
||||
|
@ -4,7 +4,7 @@ import { Static, Type } from '@sinclair/typebox';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import Text, { TextPropertySchema } from '../_internal/Text';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const Kbd: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
text,
|
||||
@ -16,7 +16,7 @@ const Kbd: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
}, [text.raw]);
|
||||
|
||||
return (
|
||||
<BaseKbd css={css`${customStyle?.content}`}>
|
||||
<BaseKbd className={css`${customStyle?.content}`}>
|
||||
<Text value={text} />
|
||||
</BaseKbd>
|
||||
);
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Link } from '@chakra-ui/react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
@ -16,7 +16,7 @@ const LinkImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
href={href}
|
||||
isExternal={isExternal}
|
||||
color="blue.500"
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
|
@ -5,7 +5,7 @@ import { ComponentImplementation } from '../../services/registry';
|
||||
import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../../constants';
|
||||
import { RuntimeModuleSchema } from '../../types/RuntimeSchema';
|
||||
import { ModuleRenderer } from '../_internal/ModuleRenderer';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
listData,
|
||||
@ -42,7 +42,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
|
||||
return (
|
||||
<BaseList
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
|
@ -4,7 +4,7 @@ import { Static, Type } from '@sinclair/typebox';
|
||||
import { Select as BaseMultiSelect } from 'chakra-react-select';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const StateSchema = Type.Object({
|
||||
value: Type.String(),
|
||||
@ -34,7 +34,7 @@ const MultiSelect: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
return (
|
||||
<Box
|
||||
width="full"
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
|
@ -9,7 +9,7 @@ import {
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
defaultValue = 0,
|
||||
@ -61,7 +61,7 @@ const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
allowMouseWheel={allowMouseWheel}
|
||||
size={size}
|
||||
onChange={onChange}
|
||||
css={css`${customStyle?.content}`}
|
||||
className={css`${customStyle?.content}`}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
|
@ -5,7 +5,7 @@ import { Radio as BaseRadio } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import Text, { TextPropertySchema } from '../_internal/Text';
|
||||
import { ColorSchemePropertySchema } from './Types/ColorScheme';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const StateSchema = Type.Object({
|
||||
value: Type.String(),
|
||||
@ -47,7 +47,7 @@ const Radio: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
size={size}
|
||||
spacing={spacing}
|
||||
colorScheme={colorScheme}
|
||||
css={css`${customStyle?.content}`}
|
||||
className={css`${customStyle?.content}`}
|
||||
>
|
||||
<Text value={text} />
|
||||
</BaseRadio>
|
||||
|
@ -4,7 +4,7 @@ import { Static, Type } from '@sinclair/typebox';
|
||||
import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import Slot from '../_internal/Slot';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const StateSchema = Type.Object({
|
||||
value: Type.String(),
|
||||
@ -31,7 +31,7 @@ const RadioGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
<BaseRadioGroup
|
||||
value={value}
|
||||
onChange={val => setValue(isNumerical ? Number(val) : val)}
|
||||
css={css`${customStyle?.content}`}
|
||||
className={css`${customStyle?.content}`}
|
||||
>
|
||||
<Slot slotsMap={slotsMap} slot="content" />
|
||||
</BaseRadioGroup>
|
||||
|
@ -3,7 +3,7 @@ import { createComponent } from '@sunmao-ui/core';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { Select as BaseSelect } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const StateSchema = Type.Object({
|
||||
value: Type.String(),
|
||||
@ -48,7 +48,7 @@ const Select: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
size={size}
|
||||
variant={variant}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
css={css`${customStyle?.content}`}
|
||||
className={css`${customStyle?.content}`}
|
||||
>
|
||||
{options.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { Tabs as BaseTabs, TabList, Tab, TabPanels, TabPanel, Text } from '@chakra-ui/react';
|
||||
import { Type, Static } from '@sinclair/typebox';
|
||||
@ -30,7 +30,7 @@ const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
{tabNames.map((name, idx) => (
|
||||
<Tab
|
||||
key={idx}
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.tabItem}
|
||||
`}
|
||||
>
|
||||
@ -43,7 +43,7 @@ const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
return (
|
||||
<TabPanel
|
||||
key={idx}
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.tabContent}
|
||||
`}
|
||||
>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { createComponent } from '@sunmao-ui/core';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { VStack as BaseVStack } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
@ -30,7 +30,7 @@ const VStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
borderRadius="4"
|
||||
css={css`
|
||||
className={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
{...{ direction, wrap, align, justify, spacing }}
|
||||
|
@ -4,7 +4,7 @@ import { createComponent } from '@sunmao-ui/core';
|
||||
import { getSlots } from '../_internal/Slot';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { partial } from 'lodash-es';
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout'));
|
||||
|
||||
@ -30,9 +30,7 @@ const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
onDragStop={onDragStop}
|
||||
onDrop={onDrop}
|
||||
layout={layout}
|
||||
css={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
className={css`${customStyle?.content}`}
|
||||
>
|
||||
{getSlots(slotsMap, 'content', {})}
|
||||
</BaseGridLayout>
|
||||
|
@ -3,7 +3,6 @@ import { Static, Type } from '@sinclair/typebox';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { RuntimeModuleSchema } from '../../types/RuntimeSchema';
|
||||
import { ModuleRenderer } from '../_internal/ModuleRenderer';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
type Props = Static<typeof RuntimeModuleSchema>;
|
||||
|
||||
@ -13,8 +12,7 @@ const ModuleContainer: ComponentImplementation<Props> = ({
|
||||
properties,
|
||||
handlers,
|
||||
services,
|
||||
app,
|
||||
customStyle
|
||||
app
|
||||
}) => {
|
||||
if (!type) {
|
||||
return <span>Please choose a module to render.</span>
|
||||
@ -31,7 +29,6 @@ const ModuleContainer: ComponentImplementation<Props> = ({
|
||||
handlers={handlers}
|
||||
services={services}
|
||||
app={app}
|
||||
css={css`${customStyle?.content}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -60,7 +57,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: ['content'],
|
||||
styleSlots: [],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
@ -25,7 +25,7 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button ref={ref} onClick={callbackMap?.onClick} css={`${customStyle?.content}`}>
|
||||
<button ref={ref} onClick={callbackMap?.onClick} className={`${customStyle?.content}`}>
|
||||
<Text value={text} />
|
||||
</button>
|
||||
);
|
||||
|
@ -18,10 +18,8 @@
|
||||
"noEmit": false,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"types": ["@emotion/react/types/css-prop"],
|
||||
"baseUrl": "./",
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "@emotion/react",
|
||||
"rootDir": "src"
|
||||
},
|
||||
"include": ["./src"]
|
||||
|
@ -5,20 +5,7 @@ import { virtualExamplePlugin } from '@sunmao-ui/vite-plugins';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react({
|
||||
babel: {
|
||||
plugins: [
|
||||
[
|
||||
'@babel/plugin-transform-react-jsx',
|
||||
{
|
||||
throwIfNamespace: false, // defaults to true
|
||||
runtime: 'automatic',
|
||||
importSource: '@emotion/react',
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
}),
|
||||
react(),
|
||||
virtualExamplePlugin(),
|
||||
],
|
||||
define: {
|
||||
|
@ -1670,7 +1670,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
|
||||
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
|
||||
|
||||
"@emotion/react@^11", "@emotion/react@^11.1.1":
|
||||
"@emotion/react@^11.1.1":
|
||||
version "11.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
|
||||
integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==
|
||||
|
Loading…
x
Reference in New Issue
Block a user