mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-02-11 17:37:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add descriptions component & add dropdown demo

Browse Source
This commit is contained in:
xzdry 2022-04-24 13:17:01 +08:00
parent 1ae52e24ca
commit c83a1bf4ac
9 changed files with 623 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/arco-lib/src/components/Descriptions.tsx Normal file
View File

@ -0,0 +1,76 @@
import { Descriptions as BaseDescriptions } from '@arco-design/web-react';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { DescriptionPropsSpec as BaseDescriptionPropsSpec } from '../generated/types/Descriptions';
const DescriptionPropsSpec = Type.Object(BaseDescriptionPropsSpec);
const DescriptionStateSpec = Type.Object({});
const exampleProperties: Static<typeof DescriptionPropsSpec> = {
data: [
{
label: 'Name',
value: 'Socrates',
},
{
label: 'Mobile',
value: '123-1234-1234',
},
{
label: 'Residence',
value: 'Beijing',
},
{
label: 'Hometown',
value: 'Beijing',
},
{
label: 'Date of Birth',
value: '2020-05-15',
span: 2,
},
{
label: 'Address',
value: 'Yingdu Building, Zhichun Road, Beijing',
},
],
title: 'User Info',
colon: '',
layout: 'horizontal',
size: 'default',
tableLayout: 'auto',
border: true,
column: 2,
};
const options = {
version: 'arco/v1',
metadata: {
...FALLBACK_METADATA,
name: 'descriptions',
displayName: 'Descriptions',
exampleProperties,
annotations: {
category: 'Display',
},
},
spec: {
properties: DescriptionPropsSpec,
state: DescriptionStateSpec,
methods: {},
slots: [],
styleSlots: ['content'],
events: [],
},
};
export const Descriptions = implementRuntimeComponent(options)(props => {
const { data,...cProps } = getComponentProps(props);
const { customStyle } = props;
return (
<BaseDescriptions data={data} className={css(customStyle?.content)} {...cProps} />
);
});

4
packages/arco-lib/src/components/Dropdown.tsx
View File

@ -26,6 +26,7 @@ const exampleProperties: Static<typeof DropdownPropsSpec> = {
{ key: '2', label: 'baidu' },
{ key: '3', label: 'tencent' },
],
autoAlignPopupWidth: true,
};
const options = {
@ -52,7 +53,7 @@ const options = {
export const Dropdown = implementRuntimeComponent(options)(props => {
const { elementRef, slotsElements, callbackMap, mergeState } = props;
const cProps = getComponentProps(props);
const { list, dropdownType, ...restProps } = cProps;
const { list, dropdownType, autoAlignPopupWidth, ...restProps } = cProps;
const typeMap = {
default: BaseDropdown,
button: BaseDropdown.Button,
@ -87,6 +88,7 @@ export const Dropdown = implementRuntimeComponent(options)(props => {
droplist={droplist}
onVisibleChange={onVisibleChange}
onClick={callbackMap?.onButtonClick}
triggerProps={{ autoAlignPopupMinWidth: autoAlignPopupWidth }}
unmountOnExit={false}
>
<div ref={elementRef}>{slotsElements.trigger || <Button>Click</Button>}</div>

4
packages/arco-lib/src/examples/ExampleIndexPage.tsx
View File

@ -6,6 +6,7 @@ import { TableDemoPage } from './pages/table';
import { LayoutDemoPage } from './pages/layout';
import { TabDemoPage } from './pages/tab';
import { DividerDemoPage } from './pages/divider';
import { DropdownDemoPage } from './pages/Dropdown';
const { Sider, Content, Header } = Layout;
const ContentMap: Record<string, React.FC> = {
@ -14,7 +15,8 @@ const ContentMap: Record<string, React.FC> = {
Table: TableDemoPage,
Layout: LayoutDemoPage,
Tab: TabDemoPage,
Divider:DividerDemoPage
Divider: DividerDemoPage,
Dropdown: DropdownDemoPage,
};
export const ExampleIndexPage: React.FC = () => {

357
packages/arco-lib/src/examples/pages/Dropdown/basicUsage.ts Normal file
View File

@ -0,0 +1,357 @@
import { Application } from '@sunmao-ui/core';
const basicUsage: Application = {
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "api0",
"type": "core/v1/dummy",
"properties": {},
"traits": [
{
"type": "core/v1/fetch",
"properties": {
"url": "/test",
"method": "post",
"lazy": true,
"headers": {
"Content-Type": "application/json"
},
"body": "{{\ntrans({value:input4.value})\n}}",
"bodyType": "json",
"onComplete": [],
"onError": []
}
}
]
},
{
"id": "stack9",
"type": "core/v1/stack",
"properties": {
"spacing": 20,
"direction": "horizontal",
"align": "start",
"wrap": "",
"justify": ""
},
"traits": []
},
{
"id": "dropdown6",
"type": "arco/v1/dropdown",
"properties": {
"dropdownType": "default",
"trigger": "hover",
"position": "bl",
"disabled": false,
"defaultPopupVisible": false,
"list": [
{
"key": "1",
"label": "smartx"
},
{
"key": "2",
"label": "baidu"
},
{
"key": "3",
"label": "tencent"
}
],
"autoAlignPopupWidth": true
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack9",
"slot": "content"
}
}
}
]
},
{
"id": "stack14",
"type": "core/v1/stack",
"properties": {
"spacing": 0,
"direction": "horizontal",
"align": "start",
"wrap": "",
"justify": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "dropdown6",
"slot": "trigger"
}
}
}
]
},
{
"id": "button15",
"type": "arco/v1/button",
"properties": {
"type": "primary",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": "hover me"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack14",
"slot": "content"
}
}
},
{
"type": "core/v1/event",
"properties": {
"handlers": []
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "&&{\nbackground-color: transparent !important;\ncolor:rgb(22,93,255) !important;\n padding-right:0px !important;\nbackground: transparent;\n}"
}
]
}
}
]
},
{
"id": "button10",
"type": "arco/v1/button",
"properties": {
"type": "primary",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack14",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "&&{\nbackground-color: transparent !important;\n padding-left:1px !important;\ncolor:rgb(22,93,255) !important;\nbackground: transparent;\n}"
}
]
}
}
]
},
{
"id": "icon16",
"type": "arco/v1/icon",
"properties": {
"name": "IconDown",
"spin": false
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "button10",
"slot": "icon"
}
}
}
]
},
{
"id": "dropdown3",
"type": "arco/v1/dropdown",
"properties": {
"dropdownType": "default",
"trigger": "click",
"position": "bl",
"disabled": false,
"defaultPopupVisible": false,
"list": [
{
"key": "1",
"label": "sign in"
},
{
"key": "2",
"label": "sign up"
}
],
"autoAlignPopupWidth": true
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack9",
"slot": "content"
}
}
}
]
},
{
"id": "stack14_copy5",
"type": "core/v1/stack",
"properties": {
"spacing": 0,
"direction": "horizontal",
"align": "start",
"wrap": "",
"justify": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "dropdown3",
"slot": "trigger"
}
}
}
]
},
{
"id": "button15_copy5",
"type": "arco/v1/button",
"properties": {
"type": "primary",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": "click me"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack14_copy5",
"slot": "content"
}
}
},
{
"type": "core/v1/event",
"properties": {
"handlers": []
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "&&{\nbackground-color: transparent !important;\ncolor:rgb(22,93,255) !important;\n padding-right:0px !important;\nbackground: transparent;\n}"
}
]
}
}
]
},
{
"id": "button10_copy5",
"type": "arco/v1/button",
"properties": {
"type": "primary",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack14_copy5",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "&&{\nbackground-color: transparent !important;\n padding-left:1px !important;\ncolor:rgb(22,93,255) !important;\nbackground: transparent;\n}"
}
]
}
}
]
},
{
"id": "icon16_copy5",
"type": "arco/v1/icon",
"properties": {
"name": "IconDown",
"spin": false
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "button10_copy5",
"slot": "icon"
}
}
}
]
}
]
}
}
export default basicUsage;

17
packages/arco-lib/src/examples/pages/Dropdown/index.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Divider, Typography } from '@arco-design/web-react';
import { DemoWrapper } from '../../DemoWrapper';
import basicUsage from './basicUsage';
import avatarUsage from './withAvatar';
export const DropdownDemoPage: React.FC = () => {
return (
<div>
<Typography.Title heading={3}>Basic Usage</Typography.Title>
<DemoWrapper application={basicUsage} />
<Divider />
<Typography.Title heading={3}>Dropdown With Avatar</Typography.Title>
<DemoWrapper application={avatarUsage} />
<Divider />
</div>
);
};

111
packages/arco-lib/src/examples/pages/Dropdown/withAvatar.ts Normal file
View File

@ -0,0 +1,111 @@
import { Application } from '@sunmao-ui/core';
const withAvatarUsage: Application = {
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "api0",
"type": "core/v1/dummy",
"properties": {},
"traits": [
{
"type": "core/v1/fetch",
"properties": {
"url": "/test",
"method": "post",
"lazy": true,
"headers": {
"Content-Type": "application/json"
},
"body": "{{\ntrans({value:input4.value})\n}}",
"bodyType": "json",
"onComplete": [],
"onError": []
}
}
]
},
{
"id": "dropdown3",
"type": "arco/v1/dropdown",
"properties": {
"dropdownType": "default",
"trigger": "hover",
"position": "tl",
"disabled": false,
"defaultPopupVisible": false,
"list": [
{
"key": "1",
"label": "sign in"
},
{
"key": "2",
"label": "sign up"
}
]
},
"traits": []
},
{
"id": "avatar2",
"type": "arco/v1/avatar",
"properties": {
"shape": "circle",
"triggerType": "button",
"size": 50,
"type": "text",
"text": "T"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "dropdown3",
"slot": "trigger"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "&&{\ncursor:pointer;\nbackground-color:rgb(20, 201, 201)\n}"
}
]
}
}
]
},
{
"id": "icon3",
"type": "arco/v1/icon",
"properties": {
"name": "IconTwitter",
"spin": false
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "avatar2",
"slot": "triggerIcon"
}
}
}
]
}
]
}
}
export default withAvatarUsage;

50
packages/arco-lib/src/generated/types/Descriptions.ts Normal file
View File

@ -0,0 +1,50 @@
import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const dataPropsSpec = Type.Object({
label: Type.String({
title: 'Label',
}),
value: Type.String({
title: 'Value'
}),
span: Type.Optional(Type.Number({
title: 'Span'
}))
})
export const DescriptionPropsSpec = {
data: Type.Array(dataPropsSpec, {
title: 'Data',
category: Category.Basic
}),
column: Type.Number({
title: 'Column',
category: Category.Basic,
}),
title: Type.String({
title: 'Title',
category: Category.Basic,
}),
layout: StringUnion(['horizontal', 'vertical', 'inline-horizontal', 'inline-vertical'], {
title: 'Layout',
category: Category.Layout,
}),
size: StringUnion(['mini', 'small', 'medium', 'default', 'large'], {
title: 'Layout',
category: Category.Layout,
}),
tableLayout: StringUnion(['auto', 'fixed'], {
title: 'Layout',
category: Category.Layout,
}),
colon: Type.String({
title: 'Colon',
category: Category.Basic,
}),
border: Type.Boolean({
title: 'border',
category: Category.Style,
}),
};

4
packages/arco-lib/src/generated/types/Dropdown.ts
View File

@ -23,6 +23,10 @@ export const DropdownPropsSpec = {
title: 'Default Visible',
category: Category.Basic,
}),
autoAlignPopupWidth:Type.Boolean({
title:'Auto Align Popup Width',
category: Category.Basic,
}),
list: Type.Array(
Type.Object({
key: Type.String({

2
packages/arco-lib/src/lib.ts
View File

@ -35,6 +35,7 @@ import { TextArea } from './components/TextArea';
import { Tabs } from './components/Tabs';
import { Form } from './components/Form/Form';
import { FormControl } from './components/Form/FormControl';
import { Descriptions } from './components/Descriptions';
import './style.css';
@ -75,6 +76,7 @@ export const components: SunmaoLib['components'] = [
Tabs,
Form,
FormControl,
Descriptions
];
export const traits: SunmaoLib['traits'] = [];
export const modules: SunmaoLib['modules'] = [];