feat: support filter (#1)

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.56",
+  "version": "1.0.57",
   "description": "my apitable widget chart",
   "engines": {
     "node": ">=8.x"

src/form_components/filter_select.tsx

@@ -0,0 +1,119 @@
+import { LinkButton, useThemeColors, Modal, Button } from "@apitable/components"
+import { AddOutlined, FilterOutlined } from "@apitable/icons"
+import { Filter, t } from "@apitable/widget-sdk"
+import styled from 'styled-components';
+import { Strings } from '../i18n';
+
+import React, { useEffect, useRef, useState } from "react"
+
+interface IFilterSelect {
+  value: any;
+  onChange?: (filter: any) => void;
+}
+
+export const AddFilterButton = styled(LinkButton)`
+  :hover {
+    color: var(--textBrandHover);
+    svg {
+      fill: var(--textBrandHover);
+    }
+  }
+
+  :active {
+    color: var(--textBrandActive);
+    svg {
+      fill: var(--textBrandActive);
+    }
+  }
+`;
+
+const FilterModal = ({ value, visible, onCancel, onConfirm }) => {
+  const [filter, setFilter] = useState(value);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (visible) {
+      setFilter(value);
+    } else {
+      setFilter(null);
+    }
+  }, [visible, value]);
+
+  const onChange = (value) => {
+    const curLength = value ? (Object.values(value)[0] as [])?.length : 0;
+    const prevLength = filter ? (Object.values(filter)[0] as [])?.length : 0;
+    const isAddFilter = curLength > prevLength;
+    setFilter(value);
+    isAddFilter && setTimeout(() => {
+      if (!listRef.current) return;
+      listRef.current.scroll({ top: listRef.current.scrollHeight, behavior: 'smooth' });
+    });
+  };
+
+  return (
+    <Modal
+      title={t(Strings.filter_modal_title)}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={() => onConfirm(filter)}
+      cancelText={t(Strings.cancel)}
+      okText={t(Strings.confirm)}
+      width={800}
+      centered
+    >
+      <div ref={listRef} style={{ maxHeight: 440, overflowY: 'auto' }}>
+        <Filter 
+          filter={filter} 
+          onChange={onChange}
+        />
+      </div>
+    </Modal>
+  )
+};
+
+export const FilterSelect = ({ value, onChange }: IFilterSelect) => {
+  const colors = useThemeColors();
+  const [showModal, setShowModal] = useState<boolean>();
+
+  const onConfirm = (filter) => {
+    onChange?.(filter);
+    setShowModal(false);
+  }
+
+  const filterLen = value ? value[Object.keys(value)[0]]?.length : 0;
+
+  return (
+    <div>
+      {
+        filterLen ?
+          <Button
+            size={'small'}
+            variant="jelly"
+            color="primary"
+            prefixIcon={<FilterOutlined />}
+            onClick={() => setShowModal(true)}
+            style={{ fontSize: 13 }}
+          >
+            {filterLen}{t(Strings.filters_amount)}
+          </Button> :
+          <AddFilterButton
+            href="javascript:void(0)"
+            color={colors.textCommonPrimary}
+            underline={false}
+            prefixIcon={<AddOutlined color={colors.textCommonPrimary} size={12} />}
+            onClick={() => setShowModal(true)}
+          >
+            <span style={{ fontSize: 12 }}>
+              {t(Strings.add_filter)}
+            </span>
+          </AddFilterButton>
+      }
+      <FilterModal
+        visible={showModal}
+        onCancel={() => setShowModal(false)}
+        onConfirm={onConfirm}
+        value={value}
+      />
+    </div>
+  )
+};

src/form_components/index.ts

@@ -1 +1,2 @@
-export * from './field_select';
+export * from './field_select';
+export * from './filter_select';

src/summary.tsx

@@ -15,6 +15,7 @@ import { FieldSelect } from './form_components/field_select';
 import { getFieldFormEnum, jsonpointer, useResize } from './helper';
 import { CurrentValueWrapper, FormWrapper, SummaryWrapper } from './sc';
 import settings from '../settings.json';
+import { FilterSelect } from './form_components';
 
 function isNumeric(value) {
   if (isNumber(value)) {
@@ -37,7 +38,7 @@ const metricsTypePointer = jsonpointer.compile('/chartStructure/metricsType');
 const Summary = ({ openSetting, formData }) => {
   const viewId = (formData as any)?.dataSource?.view;
   const color = formData.chartStyle.color || '#7B67EE'; // FIXME: ui branch merge from the theme.
-  const records = useRecords(viewId);
+  const records = useRecords(viewId, { filter: formData?.dataSource?.filter });
   const fields = useFields((formData as any)?.dataSource?.view);
   const innerRef = useRef<HTMLDivElement>(null);
   const resizeHandler = ({ width, height }) => {
@@ -141,6 +142,7 @@ const useGetDefaultFormData = () => {
     return {
       dataSource: {
         view: views[0].id,
+        filter: null,
       },
       chartStructure: {
         metricsType: METRICS_TYPES[0],
@@ -205,6 +207,9 @@ const WidgetSummaryBase: React.FC = () => {
             enum: viewEnum,
             enumNames: viewEnumNames,
           },
+          filter: {
+            type: 'string'
+          }
         },
       },
       chartStructure: {
@@ -333,7 +338,15 @@ const WidgetSummaryBase: React.FC = () => {
         'ui:widget': (props) => {
           return <ViewPicker placeholder={t(Strings.pick_one_option)} controlJump viewId={props.value} onChange={option => props.onChange(option.value)} />;
         },
-      }
+      },
+      filter: {
+        'ui:options': {
+          showTitle: false,
+        },
+        'ui:widget': (props) => {
+          return <FilterSelect value={props.value} onChange={filter => props.onChange(filter)}/>;
+        },
+      },
     },
     chartStructure: {
       'ui:options': {

strings.json

@@ -71,6 +71,26 @@
         "theme_color": {
             "zh_CN": "配色",
             "en_US": "Select color"
+        },
+        "filters_amount": {
+            "zh_CN": " 个筛选",
+            "en_US": " filter(s)"
+        },
+        "filter_modal_title": {
+            "zh_CN": "筛选设置",
+            "en_US": "Filter Setting"
+        },
+        "add_filter": {
+            "zh_CN": "添加筛选条件",
+            "en_US": "Add filter"
+        },
+        "confirm": {
+            "zh_CN": "确认",
+            "en_US": "Confirm"
+        },
+        "cancel": {
+            "zh_CN": "取消",
+            "en_US": "Cancel"
         }
     }
 }

widget.config.json

@@ -1,6 +1,6 @@
 {
-  "packageId": "wpkKTVZttMf7d",
-  "spaceId": "spcnTQKZpHU94",
+  "packageId": "wpkeo1FufSyeK",
+  "spaceId": "spcKJspLmm8E6",
   "globalPackageId": "wpkY6DKgb3iVk",
   "entry": "./src/index.ts",
   "name": {