mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-01-30 17:09:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add divider demo & add new properties to collapse

Browse Source
This commit is contained in:
xzdry 2022-04-18 10:53:10 +08:00
parent 8e8eebb9c7
commit 1ae52e24ca
7 changed files with 406 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/arco-lib/src/components/Collapse.tsx
View File

@ -31,6 +31,8 @@ const exampleProperties: Static<typeof CollapsePropsSpec> = {
accordion: false,
expandIconPosition: 'left',
bordered: false,
destroyOnHide: false,
lazyLoad: true,
};
const options = {
@ -95,4 +97,3 @@ export const Collapse = implementRuntimeComponent(options)(props => {
</BaseCollapse>
);
});

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

@ -203,10 +203,10 @@ export const Table = implementRuntimeComponent({
events: [],
},
})(props => {
const { getElement, app, mergeState, customStyle, services, data, component } = props;
const { getElement, app, mergeState, customStyle, services, component } = props;
const ref = useRef<TableInstance | null>(null);
const { pagination, rowClick, ...cProps } = getComponentProps(props);
const { pagination, rowClick, data, ...cProps } = getComponentProps(props);
const rowSelectionType = rowSelectionTypeMap[cProps.rowSelectionType];

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

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

377
packages/arco-lib/src/examples/pages/divider/basicUsage.ts Normal file
View File

@ -0,0 +1,377 @@
import { Application } from '@sunmao-ui/core';
const basicUsage: Application = {
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "stack21",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "vertical",
"align": "start",
"wrap": "",
"justify": ""
},
"traits": []
},
{
"id": "text25",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "**Vertical**",
"format": "md"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack21",
"slot": "content"
}
}
}
]
},
{
"id": "stack22",
"type": "core/v1/stack",
"properties": {
"spacing": 0,
"direction": "horizontal",
"align": "center",
"wrap": "",
"justify": "flex-start"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack21",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "border:1px solid #ddd;\npadding:10px;"
}
]
}
}
]
},
{
"id": "text23",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "item 1",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack22",
"slot": "content"
}
}
}
]
},
{
"id": "divider24",
"type": "arco/v1/divider",
"properties": {
"type": "vertical",
"orientation": "center"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack22",
"slot": "content"
}
}
}
]
},
{
"id": "text23_copy5",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "item 2",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack22",
"slot": "content"
}
}
}
]
},
{
"id": "divider24_copy7",
"type": "arco/v1/divider",
"properties": {
"type": "vertical",
"orientation": "center"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack22",
"slot": "content"
}
}
}
]
},
{
"id": "text23_copy6",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "item 3",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack22",
"slot": "content"
}
}
}
]
},
{
"id": "text25_copy8",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "**horizontal**",
"format": "md"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack21",
"slot": "content"
}
}
}
]
},
{
"id": "stack18",
"type": "core/v1/stack",
"properties": {
"spacing": 0,
"direction": "vertical",
"align": "start",
"wrap": "",
"justify": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack21",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "border:1px solid #ddd;\npadding:10px;"
}
]
}
}
]
},
{
"id": "text19",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "A design is a plan or specification for the construction of an object.",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
},
{
"id": "divider20",
"type": "arco/v1/divider",
"properties": {
"type": "horizontal",
"orientation": "center"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
},
{
"id": "text19_copy0",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "A design is a plan or specification for the construction of an object.",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
},
{
"id": "divider20_copy3",
"type": "arco/v1/divider",
"properties": {
"type": "horizontal",
"orientation": "center"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
},
{
"id": "text19_copy1",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "A design is a plan or specification for the construction of an object.",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
},
{
"id": "divider20_copy4",
"type": "arco/v1/divider",
"properties": {
"type": "horizontal",
"orientation": "center"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
},
{
"id": "text19_copy2",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "A design is a plan or specification for the construction of an object.",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack18",
"slot": "content"
}
}
}
]
}
]
}
};
export default basicUsage;

13
packages/arco-lib/src/examples/pages/divider/index.tsx Normal file
View File

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

10
packages/arco-lib/src/generated/types/Collapse.ts
View File

@ -22,6 +22,9 @@ export const CollapseItemPropsSpec = {
title: 'Show Expand Icon',
category: Category.Basic,
}),
destroyOnHide:Type.Optional(Type.Boolean({
title:'Destroy On Hide'
}))
};
export const CollapsePropsSpec = {
@ -47,6 +50,13 @@ export const CollapsePropsSpec = {
widgetOptions: {
displayedKeys: ['header'],
}
}),
lazyLoad:Type.Boolean({
title:'Lazy Load',
description:'If true, invisible panels will not be rendered on mount'
}),
destroyOnHide:Type.Boolean({
title:'Destroy On Hide'
})
};

1
packages/arco-lib/src/sunmao-helper.ts
View File

@ -48,7 +48,6 @@ export const getComponentProps = <
services,
app,
gridCallbacks,
data,
customStyle,
callbackMap,
effects,