feat: add date picker (#2644)

Co-authored-by: himself65 <himself65@outlook.com>

packages/component/src/components/page-list/filter/condition.tsx

@@ -6,6 +6,7 @@ import { Menu, MenuItem } from '../../../ui/menu';
 import * as styles from './index.css';
 import { literalMatcher } from './literal-matcher';
 import type { TFunction, TType } from './logical/typesystem';
+import { variableDefineMap } from './shared-types';
 import { filterMatcher, VariableSelect, vars } from './vars';
 
 export const Condition = ({
@@ -35,7 +36,10 @@ export const Condition = ({
             content={<VariableSelect selected={[]} onSelect={onChange} />}
           >
             <div data-testid="variable-name" className={styles.filterTypeStyle}>
-              {ast.left.name}
+              <div className={styles.filterTypeIconStyle}>
+                {variableDefineMap[ast.left.name].icon}
+              </div>
+              <div>{ast.left.name}</div>
             </div>
           </Menu>
           <Menu
@@ -101,7 +105,7 @@ export const Arg = ({
     return null;
   }
   return (
-    <div data-testid="filter-arg" style={{ marginLeft: 4 }}>
+    <div data-testid="filter-arg" style={{ marginLeft: 4, fontWeight: 600 }}>
       {data.render({ type, value, onChange })}
     </div>
   );

packages/component/src/components/page-list/filter/index.css.ts

@@ -41,12 +41,21 @@ export const filterItemCloseStyle = style({
 });
 export const inputStyle = style({
   fontSize: 'var(--affine-font-xs)',
+  margin: '0 10px',
 });
 export const switchStyle = style({
   fontSize: 'var(--affine-font-xs)',
   color: 'var(--affine-text-secondary-color)',
-  marginLeft: '4px',
+  margin: '0 10px',
 });
 export const filterTypeStyle = style({
   fontSize: 'var(--affine-font-sm)',
+  display: 'flex',
+  marginRight: '10px',
+});
+export const filterTypeIconStyle = style({
+  fontSize: 'var(--affine-font-base)',
+  marginRight: '6px',
+  display: 'flex',
+  color: 'var(--affine-icon-color)',
 });

packages/component/src/components/page-list/filter/literal-matcher.tsx

@@ -2,6 +2,7 @@ import type { Literal } from '@affine/env/filter';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
+import { AFFiNEDatePicker } from '../../date-picker';
 import { inputStyle } from './index.css';
 import { tBoolean, tDate } from './logical/custom-type';
 import { Matcher } from './logical/matcher';
@@ -33,14 +34,12 @@ literalMatcher.register(tBoolean.create(), {
 });
 literalMatcher.register(tDate.create(), {
   render: ({ value, onChange }) => (
-    <input
-      className={inputStyle}
+    <AFFiNEDatePicker
       value={dayjs(value.value as number).format('YYYY-MM-DD')}
-      type="date"
       onChange={e => {
         onChange({
           type: 'literal',
-          value: dayjs(e.target.value, 'YYYY-MM-DD').valueOf(),
+          value: dayjs(e, 'YYYY-MM-DD').valueOf(),
         });
       }}
     />

packages/component/src/components/page-list/filter/shared-types.tsx

@@ -1,6 +1,5 @@
 import type { Literal, LiteralValue, VariableMap } from '@affine/env/filter';
 import { DateTimeIcon, FavoritedIcon } from '@blocksuite/icons';
-import type { ReactElement } from 'react';
 
 import { tBoolean, tDate } from './logical/custom-type';
 import type { TType } from './logical/typesystem';
@@ -13,7 +12,6 @@ export const toLiteral = (value: LiteralValue): Literal => ({
 export type FilterVariable = {
   name: keyof VariableMap;
   type: TType;
-  icon: ReactElement;
 };
 
 export const variableDefineMap = {

packages/component/src/components/page-list/filter/vars.tsx

@@ -63,7 +63,7 @@ export const VariableSelect = ({
         // .filter(v => !selected.find(filter => filter.left.name === v.name))
         .map(v => (
           <MenuItem
-            icon={v.icon}
+            icon={variableDefineMap[v.name].icon}
             key={v.name}
             onClick={() => {
               onSelect(createDefaultFilter(v));

packages/component/src/components/page-list/view/create-view.tsx

@@ -3,7 +3,7 @@ import { SaveIcon } from '@blocksuite/icons';
 import { uuidv4 } from '@blocksuite/store';
 import { useState } from 'react';
 
-import { Button, Input, Modal, ModalWrapper } from '../../..';
+import { Button, Input, Modal, ModalCloseButton, ModalWrapper } from '../../..';
 import { FilterList } from '../filter';
 import * as styles from './view-list.css';
 
@@ -25,10 +25,10 @@ const CreateView = ({
 
   return (
     <div>
-      <h1>Save As New View</h1>
+      <div className={styles.saveTitle}>Save As New View</div>
       <div
         style={{
-          backgroundColor: 'rgba(0, 0, 0, 0.04)',
+          backgroundColor: 'var(--affine-hover-color)',
           borderRadius: 8,
           padding: 20,
           marginTop: 20,
@@ -47,11 +47,13 @@ const CreateView = ({
         />
       </div>
       <div
-        style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}
+        style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 40 }}
       >
-        <Button onClick={onCancel}>Cancel</Button>
+        <Button className={styles.cancelButton} onClick={onCancel}>
+          Cancel
+        </Button>
         <Button
-          style={{ marginLeft: 20 }}
+          style={{ marginLeft: 20, borderRadius: '8px' }}
           type="primary"
           onClick={() => {
             if (value.name.trim().length > 0) {
@@ -82,7 +84,19 @@ export const SaveViewButton = ({ init, onConfirm }: CreateViewProps) => {
         </div>
       </Button>
       <Modal open={show} onClose={() => changeShow(false)}>
-        <ModalWrapper width={560} style={{ padding: '40px' }}>
+        <ModalWrapper
+          width={560}
+          style={{
+            padding: '40px',
+            background: 'var(--affine-background-primary-color)',
+          }}
+        >
+          <ModalCloseButton
+            top={12}
+            right={12}
+            onClick={() => changeShow(false)}
+            hoverColor="var(--affine-icon-color)"
+          />
           <CreateView
             init={init}
             onCancel={() => changeShow(false)}

packages/component/src/components/page-list/view/view-list.css.ts

@@ -60,3 +60,17 @@ export const saveText = style({
   justifyContent: 'center',
   fontSize: 'var(--affine-font-sm)',
 });
+export const cancelButton = style({
+  background: 'var(--affine-hover-color)',
+  borderRadius: '8px',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+    color: 'var(--affine-text-primary-color)',
+    border: '1px solid var(--affine-border-color)',
+  },
+});
+export const saveTitle = style({
+  fontSize: 'var(--affine-font-h-6)',
+  fontWeight: '600',
+  lineHeight: '24px',
+});