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

Commit172be23

Browse files
sync style property views with applied comp styles + added useThemeStyles hook
1 parent9541784 commit172be23

File tree

1 file changed

+63
-39
lines changed

1 file changed

+63
-39
lines changed

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -829,6 +829,48 @@ const ResetIcon = styled(IconReset)`
829829
}
830830
`;
831831

832+
constuseThemeStyles=(
833+
styleKey:string,
834+
props:Record<string,string|undefined>,
835+
)=>{
836+
consteditorState=useContext(EditorContext);
837+
const{comp, compType}=useContext(CompContext);
838+
consttheme=useContext(ThemeContext);
839+
constbgColor=useContext(BackgroundColorContext);
840+
const{ themeId}=theme||{};
841+
constisPreviewTheme=themeId==='preview-theme';
842+
constisDefaultTheme=themeId==='default-theme-id';
843+
844+
constappSettingsComp=editorState?.getAppSettingsComp();
845+
constpreventAppStylesOverwriting=appSettingsComp?.getView()?.preventAppStylesOverwriting;
846+
const{ appliedThemeId, preventStyleOverwriting}=(comp?.comp||{});
847+
constappTheme=isPreviewTheme||isDefaultTheme||(!preventStyleOverwriting&&!preventAppStylesOverwriting)
848+
?theme?.theme
849+
:defaultTheme;
850+
letcompTheme:JSONValue|undefined={};
851+
if(appliedThemeId!==themeId){
852+
compTheme=isPreviewTheme||isDefaultTheme||(compType&&!preventStyleOverwriting&&!preventAppStylesOverwriting)
853+
?{
854+
...(omit(defaultTheme,'components','chart')),
855+
...defaultTheme.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
856+
...(omit(theme?.theme,'components','chart')),
857+
...theme?.theme?.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
858+
}
859+
:defaultTheme.components?.[compType]?.[styleKey];
860+
}
861+
conststyleProps=(!comp&&!compType)||preventStyleOverwriting||preventAppStylesOverwriting||appliedThemeId===themeId
862+
?props
863+
:{};
864+
865+
return{
866+
appTheme,
867+
styleProps,
868+
bgColor,
869+
compTheme,
870+
compType,
871+
}
872+
};
873+
832874
exportfunctionstyleControl<TextendsreadonlySingleColorConfig[]>(
833875
colorConfigs:T,
834876
styleKey:string='',
@@ -888,39 +930,16 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
888930
returnnewControlItemCompBuilder(
889931
childrenMapasToConstructor<{[KinNames<T>]:ColorControl}>,
890932
(props)=>{
891-
// const compType = useContext(CompTypeContext);
892-
consteditorState=useContext(EditorContext);
893-
const{comp, compType}=useContext(CompContext);
894-
consttheme=useContext(ThemeContext);
895-
constbgColor=useContext(BackgroundColorContext);
896-
const{ themeId}=theme||{};
897-
constisPreviewTheme=themeId==='preview-theme';
898-
constisDefaultTheme=themeId==='default-theme-id';
899-
900-
901-
constappSettingsComp=editorState?.getAppSettingsComp();
902-
constpreventAppStylesOverwriting=appSettingsComp?.getView()?.preventAppStylesOverwriting;
903-
const{ appliedThemeId, preventStyleOverwriting}=(comp?.comp||{});
904-
constappTheme=isPreviewTheme||isDefaultTheme||(!preventStyleOverwriting&&!preventAppStylesOverwriting)
905-
?theme?.theme
906-
:defaultTheme;
907-
letcompTheme:JSONValue|undefined={};
908-
if(appliedThemeId!==themeId){
909-
compTheme=isPreviewTheme||isDefaultTheme||(compType&&!preventStyleOverwriting&&!preventAppStylesOverwriting)
910-
?{
911-
...(omit(defaultTheme,'components','chart')),
912-
...defaultTheme.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
913-
...(omit(theme?.theme,'components','chart')),
914-
...theme?.theme?.components?.[compType]?.[styleKey]asunknownasRecord<string,string>,
915-
}
916-
:defaultTheme.components?.[compType]?.[styleKey];
917-
}
918-
conststyleProps=(!comp&&!compType)||preventStyleOverwriting||preventAppStylesOverwriting||appliedThemeId===themeId
919-
?propsasColorMap
920-
:{}asColorMap;
933+
const{
934+
styleProps,
935+
appTheme,
936+
bgColor,
937+
compTheme,
938+
compType,
939+
}=useThemeStyles(styleKey,propsasRecord<string,string>);
921940

922941
returncalcColors(
923-
styleProps,
942+
stylePropsasColorMap,
924943
colorConfigs,
925944
appTheme,
926945
bgColor,
@@ -932,21 +951,26 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
932951
)
933952
.setControlItemData({filterText:label,searchChild:true})
934953
.setPropertyViewFn((children)=>{
935-
consttheme=useContext(ThemeContext);
936-
constcompType=useContext(CompTypeContext);
937-
constbgColor=useContext(BackgroundColorContext);
938954
constisMobile=useIsMobile();
939-
constcompTheme=compType
940-
?theme?.theme?.components?.[compType]?.[styleKey]
941-
:undefined;
955+
constchildrenProps=childrenToProps(children)asRecord<string,string>;
956+
const{
957+
styleProps,
958+
appTheme,
959+
bgColor,
960+
compTheme,
961+
compType,
962+
}=useThemeStyles(styleKey,childrenProps);
942963

943964
constprops=calcColors(
944-
childrenToProps(children)asColorMap,
965+
stylePropsasColorMap,
945966
colorConfigs,
946-
theme?.theme,
967+
appTheme,
947968
bgColor,
948969
compThemeasRecord<string,string>|undefined,
970+
compType,
971+
styleKey,
949972
);
973+
950974
constshowReset=Object.values(childrenToProps(children)).findIndex((item)=>item)>-1;
951975
return(
952976
<>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp