perf: checkbox dom (#3149)

* perf: checkbox dom

* perf: null check

* perf: simple mode variables

* perf: get csv encoding code

* fix: dataset filter

* perf: code editor ui

packages/web/components/common/MySelect/MultipleRowSelect.tsx

@@ -245,13 +245,7 @@ export const MultipleRowArraySelect = ({
                   onClick={() => handleSelect(item)}
                   {...(isSelected ? { color: 'primary.600' } : {})}
                 >
-                  {showCheckbox && (
-                    <Checkbox
-                      isChecked={isChecked}
-                      icon={<MyIcon name={'common/check'} w={'12px'} />}
-                      mr={1}
-                    />
-                  )}
+                  {showCheckbox && <Checkbox isChecked={isChecked} mr={1} />}
                   <Box>{item.label}</Box>
                 </Flex>
               );

packages/web/components/common/Textarea/CodeEditor/Editor.tsx

@@ -14,7 +14,6 @@ type EditorVariablePickerType = {
 };
 
 export type Props = Omit<BoxProps, 'resize' | 'onChange'> & {
-  height?: number;
   resize?: boolean;
   defaultValue?: string;
   value?: string;
@@ -111,7 +110,7 @@ const MyEditor = ({
       borderWidth={'1px'}
       borderRadius={'md'}
       borderColor={'myGray.200'}
-      py={2}
+      py={1}
       height={height}
       position={'relative'}
       pl={2}
@@ -132,8 +131,8 @@ const MyEditor = ({
       {resize && (
         <Box
           position={'absolute'}
-          right={'-1'}
-          bottom={'-1'}
+          right={'-2.5'}
+          bottom={'-3.5'}
           zIndex={10}
           cursor={'ns-resize'}
           px={'4px'}

packages/web/components/common/Textarea/CodeEditor/index.tsx

@@ -19,9 +19,11 @@ const CodeEditor = (props: Props) => {
         iconSrc="modal/edit"
         title={t('common:code_editor')}
         w={'full'}
+        h={'85vh'}
+        isCentered
       >
-        <ModalBody>
-          <MyEditor {...props} bg={'myGray.50'} defaultHeight={600} />
+        <ModalBody flex={'1 0 0'} overflow={'auto'}>
+          <MyEditor {...props} bg={'myGray.50'} height={'100%'} />
         </ModalBody>
         <ModalFooter>
           <Button mr={2} onClick={onClose} px={6}>