Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Link comp styles#585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,7 +24,18 @@ import { EditorContext } from "comps/editorState";
import React, { useContext } from "react";

const Link = styled(Button)<{ $style: LinkStyleType }>`
${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding}; font-size: ${props.$style.textSize};`}
${(props) => `
color: ${props.$style.text};
margin: ${props.$style.margin};
padding: ${props.$style.padding};
font-size: ${props.$style.textSize};
&:hover {
color: ${props.$style.hoverText} !important;
}
&:active {
color: ${props.$style.activeText} !important;
}
`}
&.ant-btn {
display: inline-flex;
align-items: center;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,6 +50,9 @@ export class ColumnTypeCompBuilder<
private propertyViewFn?: PropertyViewFnTypeForComp<
RecordConstructorToComp<NewChildrenCtorMap<ChildrenCtorMap, T>>
>;
private stylePropertyViewFn?: PropertyViewFnTypeForComp<
RecordConstructorToComp<NewChildrenCtorMap<ChildrenCtorMap, T>>
>;
private editViewFn?: EditViewFn<T>;

constructor(
Expand DownExpand Up@@ -77,6 +80,15 @@ export class ColumnTypeCompBuilder<
return this;
}

setStylePropertyViewFn(
stylePropertyViewFn: PropertyViewFnTypeForComp<
RecordConstructorToComp<NewChildrenCtorMap<ChildrenCtorMap, T>>
>
) {
this.stylePropertyViewFn = stylePropertyViewFn;
return this;
}

build() {
if (!this.propertyViewFn) {
throw new Error("need property view fn");
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,13 +8,16 @@ import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
import { trans } from "i18n";
import { disabledPropertyView } from "comps/utils/propertyUtils";
import styled, { css } from "styled-components";
import { styleControl } from "comps/controls/styleControl";
import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";

export const ColumnValueTooltip = trans("table.columnValueTooltip");

const childrenMap = {
text: StringControl,
onClick: ActionSelectorControlInContext,
disabled: BoolCodeControl,
style: styleControl(TableColumnLinkStyle),
};

const disableCss = css`
Expand DownExpand Up@@ -78,5 +81,10 @@ export const LinkComp = (function () {
})}
</>
))
.setStylePropertyViewFn((children) => (
<>
{children.style.getPropertyView()}
</>
))
.build();
})();
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,8 @@ import { ColorControl } from "comps/controls/colorControl";
import { JSONValue } from "util/jsonTypes";
import styled from "styled-components";
import { TextOverflowControl } from "comps/controls/textOverflowControl";
import { TableColumnLinkStyle, styleControl } from "@lowcoder-ee/index.sdk";
import { Divider } from "antd";

export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
Expand DownExpand Up@@ -106,6 +108,9 @@ export const columnChildrenMap = {
textSize: withDefault(RadiusControl, ""),
cellColor: CellColorComp,
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
linkColor: withDefault(ColorControl, "#3377ff"),
linkHoverColor: withDefault(ColorControl, ""),
linkActiveColor: withDefault(ColorControl, ""),
};

const StyledIcon = styled.span`
Expand DownExpand Up@@ -201,15 +206,36 @@ export class ColumnComp extends ColumnInitComp {
})}
{this.children.autoWidth.getView() === "fixed" &&
this.children.width.propertyView({ label: trans("prop.width") })}

{(columnType === 'link' || columnType === 'links') && (
<>
<Divider style={{margin: '12px 0'}} />
{controlItem({}, (
<div>
<b>{"Link Style"}</b>
</div>
))}
{this.children.linkColor.propertyView({
label: trans('text') // trans('style.background'),
})}
{this.children.linkHoverColor.propertyView({
label: "Hover text", // trans('style.background'),
})}
{this.children.linkActiveColor.propertyView({
label: "Active text", // trans('style.background'),
})}
</>
)}
<Divider style={{margin: '12px 0'}} />
{controlItem({}, (
<div style={{marginTop: '8px'}}>
<b>{"Style"}</b>
<div>
<b>{"ColumnStyle"}</b>
</div>
))}
{this.children.background.propertyView({
label: trans('style.background'),
})}
{this.children.text.propertyView({
{columnType !== 'link' &&this.children.text.propertyView({
label: trans('text'),
})}
{this.children.border.propertyView({
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,7 @@ import {
defaultTheme,
handleToHoverRow,
handleToSelectedRow,
TableColumnLinkStyleType,
TableColumnStyleType,
TableRowStyleType,
TableStyleType,
Expand DownExpand Up@@ -285,6 +286,7 @@ const TableTh = styled.th<{ width?: number }>`
const TableTd = styled.td<{
background: string;
$style: TableColumnStyleType & {rowHeight?: string};
$linkStyle?: TableColumnLinkStyleType;
$isEditing: boolean;
$tableSize?: string;
$autoHeight?: boolean;
Expand DownExpand Up@@ -345,11 +347,15 @@ const TableTd = styled.td<{

// dark link|links color
> a,
> div> a {
color: ${(props) =>isDarkColor(props.background) && "#A6FFFF"};
> div a {
color: ${(props) => props.$linkStyle?.text};

&:hover {
color: ${(props) => isDarkColor(props.background) && "#2EE6E6"};
color: ${(props) => props.$linkStyle?.hoverText};
}

&:active {
color: ${(props) => props.$linkStyle?.activeText}};
}
}
}
Expand DownExpand Up@@ -431,6 +437,7 @@ function TableCellView(props: {
children: any;
columnsStyle: TableColumnStyleType;
columnStyle: TableColumnStyleType;
linkStyle: TableColumnLinkStyleType;
tableSize?: string;
autoHeight?: boolean;
}) {
Expand All@@ -444,6 +451,7 @@ function TableCellView(props: {
children,
columnsStyle,
columnStyle,
linkStyle,
tableSize,
autoHeight,
...restProps
Expand DownExpand Up@@ -492,6 +500,7 @@ function TableCellView(props: {
{...restProps}
background={background}
$style={style}
$linkStyle={linkStyle}
$isEditing={editing}
$tableSize={tableSize}
$autoHeight={autoHeight}
Expand DownExpand Up@@ -535,7 +544,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
});
let allColumnFixed = true;
const columns = props.columns.map((col, index) => {
const { width, style, cellColorFn, ...restCol } = col;
const { width, style,linkStyle,cellColorFn, ...restCol } = col;
const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
let colWidth: number | string = "auto";
let minWidth: number | string = COL_MIN_WIDTH;
Expand DownExpand Up@@ -567,6 +576,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
rowIndex: rowIndex,
columnsStyle: props.columnsStyle,
columnStyle: style,
linkStyle,
tableSize: props.size,
autoHeight: props.rowAutoHeight,
}),
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { tryToNumber } from "util/convertUtils";
import { JSONObject, JSONValue } from "util/jsonTypes";
import { StatusType } from "./column/columnTypeComps/columnStatusComp";
import { ColumnListComp, tableDataRowExample } from "./column/tableColumnListComp";
import { TableColumnStyleType } from "comps/controls/styleControlConstants";
import {TableColumnLinkStyleType,TableColumnStyleType } from "comps/controls/styleControlConstants";

export const COLUMN_CHILDREN_KEY = "children";
export const OB_ROW_ORI_INDEX = "__ob_origin_index";
Expand DownExpand Up@@ -254,6 +254,7 @@ export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
onWidthResize?: (width: number) => void;
titleText: string;
style: TableColumnStyleType;
linkStyle: TableColumnLinkStyleType;
cellColorFn: CellColorViewType;
};

Expand DownExpand Up@@ -324,6 +325,11 @@ export function columnsToAntdFormat(
textSize: column.textSize,
borderWidth: column.borderWidth,
},
linkStyle: {
text: column.linkColor,
hoverText: column.linkHoverColor,
activeText: column.linkActiveColor,
},
cellColorFn: column.cellColor,
onWidthResize: column.onWidthResize,
render: (value: any, record: RecordType, index: number) => {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -660,6 +660,28 @@ export const SegmentStyle = [
PADDING,
] as const;

const LinkTextStyle = [
{
name: "text",
label: trans("text"),
depTheme: "primary",
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
{
name: "hoverText",
label: "Hover text", // trans("style.hoverRowBackground"),
depName: "text",
transformer: handleToHoverLink,
},
{
name: "activeText",
label: "Active text", // trans("style.hoverRowBackground"),
depName: "text",
transformer: handleToHoverLink,
},
] as const;

export const TableStyle = [
...BG_STATIC_BORDER_RADIUS,
{
Expand DownExpand Up@@ -724,6 +746,10 @@ export const TableColumnStyle = [
TEXT_SIZE,
] as const;

export const TableColumnLinkStyle = [
...LinkTextStyle,
] as const;

export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;

export const FileViewerStyle = [
Expand All@@ -746,14 +772,16 @@ export const DateTimeStyle = [
...ACCENT_VALIDATE,
] as const;

function handleToHoverLink(color: string) {
if (isDarkColor(color)) {
return "#FFFFFF23";
} else {
return "#00000007";
}
}

export const LinkStyle = [
{
name: "text",
label: trans("text"),
depTheme: "primary",
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
...LinkTextStyle,
MARGIN,
PADDING,
TEXT_SIZE
Expand DownExpand Up@@ -1047,6 +1075,7 @@ export type SegmentStyleType = StyleConfigType<typeof SegmentStyle>;
export type TableStyleType = StyleConfigType<typeof TableStyle>;
export type TableRowStyleType = StyleConfigType<typeof TableRowStyle>;
export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
export type TableColumnLinkStyleType = StyleConfigType<typeof TableColumnLinkStyle>;
export type FileStyleType = StyleConfigType<typeof FileStyle>;
export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;
export type IframeStyleType = StyleConfigType<typeof IframeStyle>;
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp