Skip to content

Commit dbffc63

Browse files
chuyunchuyun
authored
Merge branch 'NotionX:master' into master
2 parents b5fc7b3 + fea0d2f commit dbffc63

File tree

15 files changed

+182
-20
lines changed

15 files changed

+182
-20
lines changed

‎packages/notion-compat/src/notion-compat-api.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,6 @@ export class NotionCompatAPI {
200200
let cursor: string
201201

202202
do {
203-
console.log('blocks.children.list', { blockId, cursor })
204203
const res = await this.client.blocks.children.list({
205204
block_id: blockId,
206205
start_cursor: cursor

‎packages/notion-types/src/block.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export type BlockType =
2424
| 'video'
2525
| 'figma'
2626
| 'typeform'
27+
| 'replit'
2728
| 'codepen'
2829
| 'excalidraw'
2930
| 'tweet'
@@ -67,6 +68,7 @@ export type Block =
6768
| VideoBlock
6869
| FigmaBlock
6970
| TypeformBlock
71+
| ReplitBlock
7072
| CodepenBlock
7173
| ExcalidrawBlock
7274
| TweetBlock
@@ -296,6 +298,10 @@ export interface TypeformBlock extends BaseContentBlock {
296298
type: 'typeform'
297299
}
298300

301+
export interface ReplitBlock extends BaseContentBlock {
302+
type: 'replit'
303+
}
304+
299305
export interface CodepenBlock extends BaseContentBlock {
300306
type: 'codepen'
301307
}

‎packages/notion-types/src/core.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export type PropertyType =
4343
| 'text'
4444
| 'number'
4545
| 'select'
46+
| 'status'
4647
| 'multi_select'
4748
| 'date'
4849
| 'person'

‎packages/notion-utils/src/format-notion-date-time.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ export interface NotionDateTime {
88
}
99

1010
export const formatNotionDateTime = (datetime: NotionDateTime) => {
11-
const dateString = `${datetime.start_time || ''} ${datetime.start_date} ${
12-
datetime.time_zone || ''
13-
}`
11+
// Adding +00:00 preserve the time in UTC.
12+
const dateString = `${datetime.start_date}T${
13+
datetime.start_time || '00:00'
14+
}+00:00`
1415
return formatDate(dateString)
1516
}

‎packages/react-notion-x/src/block.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,8 @@ export const Block: React.FC<BlockProps> = (props) => {
469469

470470
case 'embed':
471471
return <components.Embed blockId={blockId} block={block} />
472+
case 'replit':
473+
// fallthrough
472474
case 'tweet':
473475
// fallthrough
474476
case 'maps':

‎packages/react-notion-x/src/components/asset.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { LiteYouTubeEmbed } from './lite-youtube-embed'
1111
const isServer = typeof window === 'undefined'
1212

1313
const supportedAssetTypes = [
14+
'replit',
1415
'video',
1516
'image',
1617
'embed',
@@ -174,7 +175,8 @@ export const Asset: React.FC<{
174175
block.type === 'maps' ||
175176
block.type === 'excalidraw' ||
176177
block.type === 'codepen' ||
177-
block.type === 'drive'
178+
block.type === 'drive' ||
179+
block.type === 'replit'
178180
) {
179181
if (
180182
block.type === 'video' &&
@@ -239,6 +241,8 @@ export const Asset: React.FC<{
239241
/>
240242
)
241243
} else {
244+
src += block.type === 'typeform' ? '&disable-auto-focus=true' : ''
245+
242246
content = (
243247
<iframe
244248
className='notion-asset-object-fit'

‎packages/react-notion-x/src/components/search-dialog.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ import { SearchIcon } from '../icons/search-icon'
1111
import { cs } from '../utils'
1212
import { PageTitle } from './page-title'
1313

14-
// TODO: modal.default.setAppElement('.notion-viewport')
15-
1614
export class SearchDialog extends React.Component<{
1715
isOpen: boolean
1816
rootBlockId: string

‎packages/react-notion-x/src/components/text.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,12 @@ export const Text: React.FC<{
191191
const startDate = v.start_date
192192

193193
return formatDate(startDate)
194+
} else if (type === 'datetime') {
195+
// Example: Jul 31, 2010 20:00
196+
const startDate = v.start_date
197+
const startTime = v.start_time
198+
199+
return `${formatDate(startDate)} ${startTime}`
194200
} else if (type === 'daterange') {
195201
// Example: Jul 31, 2010 → Jul 31, 2020
196202
const startDate = v.start_date

‎packages/react-notion-x/src/icons/property-icon.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Person2Icon from './type-person-2'
1414
import PhoneNumberIcon from './type-phone-number'
1515
import RelationIcon from './type-relation'
1616
import SelectIcon from './type-select'
17+
import StatusIcon from './type-status'
1718
import TextIcon from './type-text'
1819
import TimestampIcon from './type-timestamp'
1920
import TitleIcon from './type-title'
@@ -29,6 +30,7 @@ const iconMap = {
2930
text: TextIcon,
3031
number: NumberIcon,
3132
select: SelectIcon,
33+
status: StatusIcon,
3234
multi_select: MultiSelectIcon,
3335
date: DateIcon,
3436
person: PersonIcon,

‎packages/react-notion-x/src/icons/type-status.svg

Lines changed: 11 additions & 0 deletions
Loading

‎packages/react-notion-x/src/icons/type-status.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react'
2+
3+
function SvgTypeStatus(props: React.SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg viewBox='0 0 16 16' {...props}>
6+
<path d='M8.75488 1.02344C8.75488 0.613281 8.41309 0.264648 8.00293 0.264648C7.59277 0.264648 7.25098 0.613281 7.25098 1.02344V3.11523C7.25098 3.51855 7.59277 3.86719 8.00293 3.86719C8.41309 3.86719 8.75488 3.51855 8.75488 3.11523V1.02344ZM3.91504 5.0293C4.20215 5.31641 4.69434 5.32324 4.97461 5.03613C5.26855 4.74902 5.26855 4.25684 4.98145 3.96973L3.53906 2.52051C3.25195 2.2334 2.7666 2.21973 2.47949 2.50684C2.19238 2.79395 2.18555 3.28613 2.47266 3.57324L3.91504 5.0293ZM10.9629 4.01758C10.6826 4.30469 10.6826 4.79688 10.9697 5.08398C11.2568 5.37109 11.749 5.36426 12.0361 5.07715L13.4854 3.62793C13.7725 3.34082 13.7725 2.84863 13.4785 2.55469C13.1982 2.27441 12.7061 2.27441 12.4189 2.56152L10.9629 4.01758ZM15.0234 8.78906C15.4336 8.78906 15.7822 8.44727 15.7822 8.03711C15.7822 7.62695 15.4336 7.28516 15.0234 7.28516H12.9385C12.5283 7.28516 12.1797 7.62695 12.1797 8.03711C12.1797 8.44727 12.5283 8.78906 12.9385 8.78906H15.0234ZM0.975586 7.28516C0.56543 7.28516 0.223633 7.62695 0.223633 8.03711C0.223633 8.44727 0.56543 8.78906 0.975586 8.78906H3.07422C3.48438 8.78906 3.83301 8.44727 3.83301 8.03711C3.83301 7.62695 3.48438 7.28516 3.07422 7.28516H0.975586ZM12.0361 10.9902C11.749 10.71 11.2568 10.71 10.9629 10.9971C10.6826 11.2842 10.6826 11.7764 10.9697 12.0635L12.4258 13.5127C12.7129 13.7998 13.2051 13.793 13.4922 13.5059C13.7793 13.2256 13.7725 12.7266 13.4854 12.4395L12.0361 10.9902ZM2.52051 12.4395C2.22656 12.7266 2.22656 13.2188 2.50684 13.5059C2.79395 13.793 3.28613 13.7998 3.57324 13.5127L5.02246 12.0703C5.31641 11.7832 5.31641 11.291 5.03613 11.0039C4.74902 10.7168 4.25684 10.71 3.96973 10.9971L2.52051 12.4395ZM8.75488 12.9658C8.75488 12.5557 8.41309 12.207 8.00293 12.207C7.59277 12.207 7.25098 12.5557 7.25098 12.9658V15.0576C7.25098 15.4609 7.59277 15.8096 8.00293 15.8096C8.41309 15.8096 8.75488 15.4609 8.75488 15.0576V12.9658Z' />
7+
</svg>
8+
)
9+
}
10+
11+
export default SvgTypeStatus

‎packages/react-notion-x/src/styles.css

Lines changed: 85 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,38 @@
5151
--notion-brown_background_co: rgba(233, 229, 227, 0.3);
5252
--notion-gray_background_co: rgba(235, 236, 237, 0.3);
5353

54-
--notion-item-blue: rgba(0, 120, 223, 0.2);
55-
--notion-item-orange: rgba(245, 93, 0, 0.2);
56-
--notion-item-green: rgba(0, 135, 107, 0.2);
57-
--notion-item-pink: rgba(221, 0, 129, 0.2);
58-
--notion-item-brown: rgba(140, 46, 0, 0.2);
59-
--notion-item-red: rgba(255, 0, 26, 0.2);
60-
--notion-item-yellow: rgba(233, 168, 0, 0.2);
61-
--notion-item-default: rgba(206, 205, 202, 0.5);
62-
--notion-item-purple: rgba(103, 36, 222, 0.2);
63-
--notion-item-gray: rgba(155, 154, 151, 0.4);
54+
--notion-item-blue: rgb(211, 229, 239);
55+
--notion-item-orange: rgb(250, 222, 201);
56+
--notion-item-green: rgb(219, 237, 219);
57+
--notion-item-pink: rgb(245, 224, 233);
58+
--notion-item-brown: rgb(238, 224, 218);
59+
--notion-item-red: rgb(255, 226, 221);
60+
--notion-item-yellow: rgb(253, 236, 200);
61+
--notion-item-default: rgba(227, 226, 224, 0.5);
62+
--notion-item-purple: rgb(232, 222, 238);
63+
--notion-item-gray: rgb(227, 226, 224);
64+
65+
--notion-item-text-blue: rgb(24, 51, 71);
66+
--notion-item-text-orange: rgb(73, 41, 14);
67+
--notion-item-text-green: rgb(28, 56, 41);
68+
--notion-item-text-pink: rgb(76, 35, 55);
69+
--notion-item-text-brown: rgb(68, 42, 30);
70+
--notion-item-text-red: rgb(93, 23, 21);
71+
--notion-item-text-yellow: rgb(64, 44, 27);
72+
--notion-item-text-default: rgb(50, 48, 44);
73+
--notion-item-text-purple: rgb(65, 36, 84);
74+
--notion-item-text-gray: rgb(50, 48, 44);
75+
76+
--notion-item-bullet-blue: rgb(91, 151, 189);
77+
--notion-item-bullet-orange: rgb(215, 129, 58);
78+
--notion-item-bullet-green: rgb(108, 155, 125);
79+
--notion-item-bullet-pink: rgb(205, 116, 159);
80+
--notion-item-bullet-brown: rgb(187, 132, 108);
81+
--notion-item-bullet-red: rgb(225, 111, 100);
82+
--notion-item-bullet-yellow: rgb(203, 148, 51);
83+
--notion-item-bullet-default: rgb(91, 151, 189);
84+
--notion-item-bullet-purple: rgb(167, 130, 195);
85+
--notion-item-bullet-gray: rgb(145, 145, 142);
6486

6587
--notion-max-width: 720px;
6688
--notion-header-height: 45px;
@@ -371,33 +393,78 @@
371393

372394
.notion-item-blue {
373395
background-color: var(--notion-item-blue);
396+
color: var(--notion-item-text-blue);
374397
}
375398
.notion-item-orange {
376399
background-color: var(--notion-item-orange);
400+
color: var(--notion-item-text-orange);
377401
}
378402
.notion-item-green {
379403
background-color: var(--notion-item-green);
404+
color: var(--notion-item-text-green);
380405
}
381406
.notion-item-pink {
382407
background-color: var(--notion-item-pink);
408+
color: var(--notion-item-text-pink);
383409
}
384410
.notion-item-brown {
385411
background-color: var(--notion-item-brown);
412+
color: var(--notion-item-text-brown);
386413
}
387414
.notion-item-red {
388415
background-color: var(--notion-item-red);
416+
color: var(--notion-item-text-red);
389417
}
390418
.notion-item-yellow {
391419
background-color: var(--notion-item-yellow);
420+
color: var(--notion-item-text-yellow);
392421
}
393-
.notion-item-default {
422+
.notion-item-default,
423+
.notion-item-default-inferred {
394424
background-color: var(--notion-item-default);
425+
color: var(--notion-item-text-default);
395426
}
396427
.notion-item-purple {
397428
background-color: var(--notion-item-purple);
429+
color: var(--notion-item-text-purple);
398430
}
399431
.notion-item-gray {
400432
background-color: var(--notion-item-gray);
433+
color: var(--notion-item-text-gray);
434+
}
435+
436+
.notion-item-bullet-blue {
437+
background-color: var(--notion-item-bullet-blue);
438+
}
439+
.notion-item-bullet-orange {
440+
background-color: var(--notion-item-bullet-orange);
441+
}
442+
.notion-item-bullet-green {
443+
background-color: var(--notion-item-bullet-green);
444+
}
445+
.notion-item-bullet-pink {
446+
background-color: var(--notion-item-bullet-pink);
447+
}
448+
.notion-item-bullet-brown {
449+
background-color: var(--notion-item-bullet-brown);
450+
}
451+
.notion-item-bullet-red {
452+
background-color: var(--notion-item-bullet-red);
453+
}
454+
.notion-item-bullet-yellow {
455+
background-color: var(--notion-item-bullet-yellow);
456+
}
457+
.notion-item-bullet-default {
458+
background-color: var(--notion-item-bullet-default);
459+
}
460+
.notion-item-bullet-default-inferred {
461+
background-color: var(--notion-item-bullet-gray);
462+
}
463+
.notion-item-bullet-purple {
464+
background-color: var(--notion-item-bullet-purple);
465+
}
466+
.notion-item-bullet-gray {
467+
background-color: var(--notion-item-bullet-gray);
401468
}
402469

403470
.notion b {
@@ -1343,25 +1410,31 @@ svg.notion-page-icon {
13431410
}
13441411

13451412
.notion-property-select,
1413+
.notion-property-status,
13461414
.notion-property-multi_select {
13471415
display: flex;
13481416
flex-wrap: wrap;
13491417
gap: 6px;
13501418
}
13511419

13521420
.notion-property-select-item,
1421+
.notion-property-status-item,
13531422
.notion-property-multi_select-item {
13541423
display: flex;
13551424
align-items: center;
13561425
padding: 0 6px;
13571426
border-radius: 3px;
1358-
height: 18px;
1427+
height: 20px;
13591428
white-space: nowrap;
13601429
overflow: hidden;
13611430
text-overflow: ellipsis;
13621431
line-height: 120%;
13631432
}
13641433

1434+
.notion-property-status-item {
1435+
border-radius: 20px;
1436+
}
1437+
13651438
.notion-property-file {
13661439
display: flex;
13671440
flex-wrap: wrap;

‎packages/react-notion-x/src/third-party/collection-view-board.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ function Board({ collectionView, collectionData, collection, padding }) {
6666
collectionView?.format?.board_groups2 ||
6767
[]
6868

69+
const boardGroupBy = collectionView?.format?.board_columns_by?.groupBy
70+
6971
const boardStyle = React.useMemo(
7072
() => ({
7173
paddingLeft: padding
@@ -104,7 +106,12 @@ function Board({ collectionView, collectionData, collection, padding }) {
104106
{group.value?.value ? (
105107
<Property
106108
schema={schema}
107-
data={[[group.value?.value]]}
109+
data={[
110+
[
111+
group.value?.value[boardGroupBy] ||
112+
group.value?.value
113+
]
114+
]}
108115
collection={collection}
109116
/>
110117
) : (

‎packages/react-notion-x/src/third-party/modal.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
import Modal from 'react-modal'
22

3+
Modal.setAppElement('.notion-frame')
4+
35
export { Modal }

‎packages/react-notion-x/src/third-party/property.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,45 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
327327
content = components.propertyTitleValue(props, renderTitleValue)
328328
break
329329

330+
case 'status': {
331+
const value = data[0][0] || ''
332+
333+
const option = schema.options?.find((option) => value === option.value)
334+
335+
const color = option?.color || 'default-inferred'
336+
337+
content = components.propertySelectValue(
338+
{
339+
...props,
340+
value,
341+
option,
342+
color
343+
},
344+
() => (
345+
<div
346+
className={cs(
347+
`notion-property-${schema.type}-item`,
348+
color && `notion-item-${color}`
349+
)}
350+
>
351+
<span
352+
className={cs(`notion-item-bullet-${color}`)}
353+
style={{
354+
marginRight: '5px',
355+
borderRadius: '100%',
356+
height: '8px',
357+
width: '8px',
358+
display: 'inline-flex',
359+
flexShrink: 0
360+
}}
361+
/>
362+
{value}
363+
</div>
364+
)
365+
)
366+
break
367+
}
368+
330369
case 'select':
331370
// intentional fallthrough
332371
case 'multi_select': {

0 commit comments

Comments
 (0)