Merge pull request #508 from jjh2613/master

NotionX · Oct 31, 2024 · dc97691 · dc97691
2 parents 4c98c80 + f302db4
commit dc97691
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 1 deletion.
diff --git a/packages/notion-types/src/core.ts b/packages/notion-types/src/core.ts
@@ -45,6 +45,7 @@ export type PropertyType =
   | 'select'
   | 'status'
   | 'multi_select'
+  | 'auto_increment_id'
   | 'date'
   | 'person'
   | 'file'

diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
@@ -131,6 +131,7 @@ const defaultComponents: NotionComponents = {
   propertyLastEditedTimeValue: dummyOverrideFn,
   propertyCreatedTimeValue: dummyOverrideFn,
   propertyDateValue: dummyOverrideFn,
+  propertyAutoIncrementIdValue: dummyOverrideFn,
 
   Pdf: dummyComponent('Pdf'),
   Tweet: dummyComponent('Tweet'),

diff --git a/packages/react-notion-x/src/icons/property-icon.tsx b/packages/react-notion-x/src/icons/property-icon.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import { PropertyType } from 'notion-types'
 
+import AutoIncrementIdIcon from './type-auto-increment-id'
 import CheckboxIcon from './type-checkbox'
 import DateIcon from './type-date'
 import EmailIcon from './type-email'
@@ -44,7 +45,8 @@ const iconMap = {
   created_time: TimestampIcon,
   last_edited_time: TimestampIcon,
   created_by: Person2Icon,
-  last_edited_by: Person2Icon
+  last_edited_by: Person2Icon,
+  auto_increment_id: AutoIncrementIdIcon
 }
 
 export const PropertyIcon: React.FC<PropertyIconProps> = ({

diff --git a/packages/react-notion-x/src/icons/type-auto-increment-id.svg b/packages/react-notion-x/src/icons/type-auto-increment-id.svg
diff --git a/packages/react-notion-x/src/icons/type-auto-increment-id.tsx b/packages/react-notion-x/src/icons/type-auto-increment-id.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+function SvgTypeAutoIncrementId(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 16 16' {...props}>
+      <path d='M12.252 7.9209C13.7217 7.9209 14.7266 6.93652 14.7266 5.50781C14.7266 4.0791 13.7217 3.10156 12.252 3.10156C10.8232 3.10156 9.8457 4.0791 9.8457 5.50781C9.8457 6.93652 10.8301 7.9209 12.252 7.9209ZM2.00488 13.1367C2.45605 13.1367 2.72949 12.8496 2.72949 12.3848V5.83594L7.35059 12.5967C7.6377 12.9932 7.86328 13.1367 8.20508 13.1367C8.69043 13.1367 8.96387 12.8359 8.96387 12.3232V3.8877C8.96387 3.42285 8.69043 3.12891 8.23242 3.12891C7.78809 3.12891 7.50781 3.41602 7.50781 3.8877V10.4229L2.89355 3.66895C2.60645 3.25879 2.40137 3.12891 2.03906 3.12891C1.56738 3.12891 1.27344 3.4502 1.27344 3.94238V12.3848C1.27344 12.8496 1.55371 13.1367 2.00488 13.1367ZM12.252 6.84766C11.5615 6.84766 11.0898 6.30762 11.0898 5.50781C11.0898 4.70801 11.5615 4.16797 12.252 4.16797C12.9902 4.16797 13.4756 4.70801 13.4756 5.50781C13.4756 6.30762 12.9834 6.84766 12.252 6.84766ZM10.625 9.77344H13.9541C14.3506 9.77344 14.624 9.54102 14.624 9.14453C14.624 8.74805 14.3506 8.50195 13.9541 8.50195H10.625C10.2285 8.50195 9.96191 8.74805 9.96191 9.14453C9.96191 9.54102 10.2285 9.77344 10.625 9.77344Z' />
+    </svg>
+  )
+}
+
+export default SvgTypeAutoIncrementId
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
@@ -10,6 +10,7 @@
   --fg-color-4: #000;
   --fg-color-5: rgba(55, 53, 47, 0.024);
   --fg-color-6: rgba(55, 53, 47, 0.8);
+  --fg-color-7: rgba(55, 53, 47, 0.5);
   --fg-color-icon: var(--fg-color);
 
   --bg-color: #fff;
@@ -1409,6 +1410,10 @@ svg.notion-page-icon {
   padding: 7px 8px 0;
 }
 
+.notion-table-cell-auto_increment_id {
+  color: var(--fg-color-7);
+}
+
 .notion-property-select,
 .notion-property-status,
 .notion-property-multi_select {
@@ -2158,6 +2163,10 @@ svg.notion-page-icon {
   width: 100%;
 }
 
+.notion-collection-row-property .notion-property-auto_increment_id {
+  color: var(--fg-color-7);
+}
+
 .notion-collection-row-property .notion-collection-column-title-icon {
   width: 16px;
   height: 16px;

diff --git a/packages/react-notion-x/src/third-party/property.tsx b/packages/react-notion-x/src/third-party/property.tsx
@@ -276,6 +276,14 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
     [block, data, schema]
   )
 
+  const renderAutoIncrementIdValue = React.useMemo(
+    () =>
+      function renderAutoIncrementIdValueProperty() {
+        return <Text value={data} block={block} />
+      },
+    [block, data]
+  )
+
   const renderCreatedTimeValue = React.useMemo(
     () =>
       function CreatedTimeProperty() {
@@ -456,6 +464,12 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
         // console.log('last_edited_by', schema, data)
         break
 
+      case 'auto_increment_id':
+        content = components.propertyTextValue(
+          props,
+          renderAutoIncrementIdValue
+        )
+        break
       case 'text':
         content = components.propertyTextValue(props, renderTextValue)
         break

diff --git a/packages/react-notion-x/src/types.ts b/packages/react-notion-x/src/types.ts
@@ -47,6 +47,7 @@ export interface NotionComponents {
   propertyLastEditedTimeValue: ComponentOverrideFn
   propertyCreatedTimeValue: ComponentOverrideFn
   propertyDateValue: ComponentOverrideFn
+  propertyAutoIncrementIdValue: ComponentOverrideFn
 
   // assets
   Pdf: any