Merge pull request #705 from imtananikhwa/imtanan-task1

Checkbox, Radio and Select styles added

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx

@@ -11,6 +11,7 @@ import { refMethods } from "comps/generators/withMethodExposing";
 
 const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
   width: 100%;
+  font-family:"Montserrat";
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -38,6 +38,7 @@ export const getStyle = (style: CheckboxStyleType) => {
         .ant-checkbox-inner {
           background-color: ${style.checkedBackground};
           border-color: ${style.checkedBackground};
+          border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
 
           &::after {
             border-color: ${style.checked};
@@ -46,6 +47,7 @@ export const getStyle = (style: CheckboxStyleType) => {
 
         &::after {
           border-color: ${style.checkedBackground};
+          border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
           border-radius: ${style.radius};
         }
       }
@@ -54,15 +56,23 @@ export const getStyle = (style: CheckboxStyleType) => {
         border-radius: ${style.radius};
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
         border-color: ${style.checkedBackground};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
     }
 
+    .ant-checkbox-group-item {
+      font-family:${style.fontFamily};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      font-style:${style.fontStyle};
+    }
     .ant-checkbox-wrapper {
       padding: ${style.padding};
       .ant-checkbox-inner,
@@ -73,7 +83,7 @@ export const getStyle = (style: CheckboxStyleType) => {
   `;
 };
 
-const CheckboxGroup = styled(AntdCheckboxGroup)<{
+const CheckboxGroup = styled(AntdCheckboxGroup) <{
   $style: CheckboxStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -21,6 +21,10 @@ const getStyle = (style: RadioStyleType) => {
       padding: ${style.padding};
       span:not(.ant-radio) {
         ${EllipsisTextCss};
+        font-family:${style.fontFamily};
+        font-size:${style.textSize};
+        font-weight:${style.textWeight};
+        font-style:${style.fontStyle};
       }
 
       .ant-radio-checked {
@@ -37,7 +41,7 @@ const getStyle = (style: RadioStyleType) => {
       .ant-radio-inner {
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
-
+        border-width:${style.borderWidth};
         &::after {
           background-color: ${style.checked};
         }

client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -7,7 +7,7 @@ import {
 import { BoolControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
 import { BoolCodeControl, StringControl } from "../../controls/codeControl";
-import { PaddingControl } from "../../controls/paddingControl";	
+import { PaddingControl } from "../../controls/paddingControl";
 import { MarginControl } from "../../controls/marginControl";
 import {
   ControlNode,
@@ -65,8 +65,15 @@ export const getStyle = (
       height: auto;	
     }	
     .ant-select-selection-search {	
-      padding: ${style.padding};	
+      padding: ${style.padding};
     }	
+    .ant-select-selection-search-input {
+      font-family:${(style as SelectStyleType).fontFamily} !important;
+      font-size:${(style as SelectStyleType).textSize} !important;
+      font-weight:${(style as SelectStyleType).textWeight};
+      color:${(style as SelectStyleType).text} !important;
+      font-style:${(style as SelectStyleType).fontStyle};
+    }
     .ant-select-selector::after,	
     .ant-select-selection-placeholder,	
     .ant-select-selection-item {	
@@ -88,6 +95,7 @@ export const getStyle = (
       .ant-select-selector {
         background-color: ${style.background};
         border-color: ${style.border};
+        border-width:${(style as SelectStyleType).borderWidth};
       }
 
       &.ant-select-focused,
@@ -101,18 +109,18 @@ export const getStyle = (
       .ant-select-clear {
         background-color: ${style.background};
         color: ${style.text === "#222222"
-          ? "#8B8FA3"
-          : isDarkColor(style.text)
-          ? lightenColor(style.text, 0.2)
-          : style.text};
+      ? "#8B8FA3"
+      : isDarkColor(style.text)
+        ? lightenColor(style.text, 0.2)
+        : style.text};
       }
 
       .ant-select-clear:hover {
         color: ${style.text === "#222222"
-          ? "#8B8FA3"
-          : isDarkColor(style.text)
-          ? lightenColor(style.text, 0.1)
-          : style.text};
+      ? "#8B8FA3"
+      : isDarkColor(style.text)
+        ? lightenColor(style.text, 0.1)
+        : style.text};
       }
 
       &.ant-select-multiple .ant-select-selection-item {
@@ -160,7 +168,7 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
   `;
 };
 
-const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>`
+const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleType }>`
   width: 100%;
 
   ${(props) => props.$style && getStyle(props.$style)}
@@ -197,7 +205,7 @@ export const SelectChildrenMap = {
   inputValue: stateComp<string>(""), // user's input value when search
   showSearch: BoolControl.DEFAULT_TRUE,
   viewRef: RefControl<BaseSelectRef>,
-  margin: MarginControl,	
+  margin: MarginControl,
   padding: PaddingControl,
   ...SelectInputValidationChildren,
   ...formDataChildren,
@@ -235,8 +243,8 @@ export const SelectUIView = (
     onSearch={
       props.showSearch
         ? (value) => {
-            props.dispatch(changeChildAction("inputValue", value, false));
-          }
+          props.dispatch(changeChildAction("inputValue", value, false));
+        }
         : undefined
     }
   >
@@ -248,6 +256,7 @@ export const SelectUIView = (
           label={option.label}
           disabled={option.disabled}
           key={option.value}
+          style={{fontFamily:"Montserrat"}}
         >
           <Wrapper className="option-label">
             {props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 &&

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx

@@ -23,19 +23,21 @@ type SelectEditProps = {
   options: any[];
 };
 
+const defaultProps: any = {}
 const SelectEdit = (props: SelectEditProps) => {
   const [currentValue, setCurrentValue] = useState(props.initialValue);
 
   return (
-    <SelectUIView 
+    <SelectUIView
+      {...defaultProps}
       value={currentValue}
       options={options}
       onChange={(val) => {
         props.onChange(val);
         setCurrentValue(val)
       }}
-      onEvent={async (eventName)=>{
-        if(eventName==="blur"){
+      onEvent={async (eventName) => {
+        if (eventName === "blur") {
           props.onChangeEnd()
         }
         return []
@@ -66,7 +68,8 @@ export const ColumnSelectComp = (function () {
           onChange={props.onChange}
           onChangeEnd={props.onChangeEnd}
         />
-    )})
+      )
+    })
     .setPropertyViewFn((children) => {
       return (
         <>

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -735,20 +735,23 @@ export const SwitchStyle = [
 ] as const;
 
 export const SelectStyle = [
-  LABEL,
-  ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  TEXT,
-  MARGIN,
-  PADDING,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
+
+  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
+  // TEXT,
+  // MARGIN,
+  // PADDING,
   ...ACCENT_VALIDATE,
 ] as const;
 
 const multiSelectCommon = [
-  LABEL,
-  ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  TEXT,
-  MARGIN,
-  PADDING,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
+  // LABEL,
+  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
+  // TEXT,
+  // MARGIN,
+  // PADDING,
   {
     name: "tags",
     label: trans("style.tags"),
@@ -841,7 +844,8 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  LABEL,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -850,15 +854,16 @@ export const CheckboxStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  RADIUS,
-  STATIC_TEXT,
-  VALIDATE,
-  MARGIN,
-  PADDING,
+  // RADIUS,
+  // STATIC_TEXT,
+  // VALIDATE,
+  // MARGIN,
+  // PADDING,
 ] as const;
 
 export const RadioStyle = [
-  LABEL,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -867,10 +872,10 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  STATIC_TEXT,
-  VALIDATE,
-  MARGIN,
-  PADDING,
+  // STATIC_TEXT,
+  // VALIDATE,
+  // MARGIN,
+  // PADDING,
 ] as const;
 
 export const SegmentStyle = [
@@ -1019,7 +1024,7 @@ export const TableColumnLinkStyle = [
 export const FileStyle = [
   // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), 
   getStaticBackground(SURFACE_COLOR),
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]),
   // TEXT, ACCENT, MARGIN, PADDING
 ] as const;