{actionBars.top.map((actionBarSchema) => {
@@ -339,10 +348,10 @@ const TableContainer = observer((props) => {
// disableAutoscroll
helperClass={`nb-table-sort-helper`}
helperContainer={() => {
- return ref.current?.querySelector('tbody')
+ return ref.current?.querySelector('tbody');
}}
onSortStart={({ node }) => {
- addTdStyles(node)
+ addTdStyles(node);
}}
onSortEnd={({ oldIndex, newIndex }) => {
field.move(oldIndex, newIndex);
@@ -352,13 +361,11 @@ const TableContainer = observer((props) => {
/>
),
row: (props: any) => {
- const index = findIndex(field.value, item => item[rowKey] === props['data-row-key']);
- return (
-
- )
+ const index = findIndex(
+ field.value,
+ (item) => item[rowKey] === props['data-row-key'],
+ );
+ return
;
},
},
}}
@@ -366,20 +373,17 @@ const TableContainer = observer((props) => {
const index = dataSource.indexOf(data);
return {
onClick(e) {
- console.log('onRow', (e.target as HTMLElement), (e.target as HTMLElement).classList.contains('ant-table-cell'));
- if (!(e.target as HTMLElement).classList.contains('ant-table-cell')) {
- return;
- }
if (!defaultAction) {
return;
}
- // console.log('defaultAction');
- field
- .query(`.${schema.name}.${index}.${defaultAction.name}`)
- .take((f) => {
- const setVisible = f.componentProps.setVisible;
- setVisible && setVisible(true);
- });
+ const el = (e.target as HTMLElement);
+ if (
+ !el.classList.contains('ant-table-cell')
+ ) {
+ return;
+ }
+ const btn = el.parentElement.querySelector
(`.name-${defaultAction.name}`);
+ btn && btn.click();
},
};
}}
@@ -411,7 +415,99 @@ export const Table: any = observer((props) => {
);
});
-Table.Column = () => null;
+function Blank() {
+ return null;
+}
+
+function useDesignableBar() {
+ const schema = useFieldSchema();
+ const options = useContext(SchemaOptionsContext);
+ const DesignableBar = get(options.components, schema['x-designable-bar']);
+
+ return {
+ DesignableBar: DesignableBar || Blank,
+ };
+}
+
+Table.Column = observer((props) => {
+ const schema = useFieldSchema();
+ const field = useField();
+ console.log('Table.Column', schema, field.title);
+ const { DesignableBar } = useDesignableBar();
+ return (
+
+ {field.title}
+
+
+ );
+});
+
+Table.Column.DesignableBar = () => {
+ const field = useField();
+ // const fieldSchema = useFieldSchema();
+ const { schema, remove, refresh, insertAfter } = useDesignable();
+ const [visible, setVisible] = useState(false);
+ console.log('Table.Column.DesignableBar', { schema });
+ return (
+
+ {
+ e.stopPropagation();
+ }}
+ className={cls('designable-bar-actions', { active: visible })}
+ >
+ {
+ setVisible(visible);
+ }}
+ overlay={
+
+ }
+ >
+
+
+
+
+ );
+};
Table.ActionBar = observer((props) => {
return (
@@ -447,17 +543,20 @@ const SortHandle = SortableHandle((props: any) => {
className={cls(`nb-table-sort-handle`, props.className)}
style={{ ...props.style }}
/>
- )
-}) as any
+ );
+}) as any;
Table.SortHandle = observer((props) => {
const field = useField();
console.log('SortHandle', field.value);
- return ;
+ return ;
});
Table.Index = observer((props) => {
const index = useTableIndex();
+ const schema = useFieldSchema();
+ const field = useField();
+ const path = useSchemaPath();
return #{index + 1}
;
});
@@ -484,3 +583,41 @@ Table.Addition = observer((props: any) => {
);
});
+
+Table.Action = () => null;
+
+Table.Action.DesignableBar = () => {
+ const field = useField();
+ const path = useSchemaPath();
+ const { schema, remove, refresh, insertAfter } = useDesignable();
+ const [visible, setVisible] = useState(false);
+ console.log('Table.Action.DesignableBar', path, field.address.entire, { schema, field });
+ return (
+
+ {
+ e.stopPropagation();
+ }}
+ className={cls('designable-bar-actions', { active: visible })}
+ >
+ {
+ setVisible(visible);
+ }}
+ overlay={
+
+ }
+ >
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/client/src/schemas/table/style.less b/packages/client/src/schemas/table/style.less
new file mode 100644
index 0000000000..d7769a9ae7
--- /dev/null
+++ b/packages/client/src/schemas/table/style.less
@@ -0,0 +1,61 @@
+.nb-table-column {
+ &:hover {
+ > .designable-bar {
+ display: block;
+ }
+ }
+ > .designable-bar {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ border-radius: 0;
+ border: 2px solid #1890ff;
+ &.active {
+ display: block;
+ }
+ .designable-bar-actions {
+ position: absolute;
+ right: 0;
+ line-height: 1rem;
+ background-color: #1890ff;
+ color: #fff;
+ z-index: 10;
+ padding: 0 3px;
+ .anticon {
+ font-size: 10px;
+ }
+ }
+ }
+}
+
+.ant-popover.nb-action-group {
+ z-index: 1000;
+ padding-top: 0;
+ .ant-popover-arrow {
+ display: none;
+ }
+ .ant-popover-inner-content {
+ padding: 4px 0;
+ .ant-btn {
+ display: block;
+ min-width: 100px;
+ width: 100%;
+ border: 0;
+ border-radius: 0;
+ text-align: left;
+ padding: 5px 12px;
+ color: #000;
+ &:hover {
+ background-color: #f5f5f5;
+ }
+ &[disabled] {
+ color: #00000040;
+ background-color:#fff;
+ cursor:not-allowed;
+ }
+ }
+ }
+}
diff --git a/packages/client/src/templates/admin-layout/index.tsx b/packages/client/src/templates/admin-layout/index.tsx
index a03c8372ab..85cd507a0f 100644
--- a/packages/client/src/templates/admin-layout/index.tsx
+++ b/packages/client/src/templates/admin-layout/index.tsx
@@ -161,33 +161,36 @@ function Database() {
}
function LayoutWithMenu({ schema }) {
+ const match = useRouteMatch();
const location = useLocation();
- const ref = useRef();
- const [activeKey, setActiveKey] = useState('item3');
- schema['x-component-props']['defaultSelectedKeys'] = [activeKey];
- schema['x-component-props']['onSelect'] = (info) => {
- console.log('LayoutWithMenu', schema)
+ const sideMenuRef = useRef();
+ const [activeKey, setActiveKey] = useState(match.params.name);
+ const onSelect = (info) => {
+ console.log('LayoutWithMenu', schema);
setActiveKey(info.key);
- }
+ };
+ console.log({ match });
return (
-
-
-
-
-
-
-
-
-
- {location.pathname}
-
-
-
+
+
+
+
+
+
+ {location.pathname}
+
+
- )
+
+ );
}
function Content({ activeKey }) {
@@ -207,7 +210,6 @@ function Content({ activeKey }) {
}
export function AdminLayout({ route, children }: any) {
- const match = useRouteMatch();
const { data = {}, loading } = useRequest(
`/api/blocks:getSchema/${route.blockId}`,
@@ -220,9 +222,7 @@ export function AdminLayout({ route, children }: any) {
return ;
}
- return (
-
- );
+ return ;
}
export default AdminLayout;