@wzyjs/uis 0.3.9 → 0.3.16

package/src/components/TimelineBar/components/TodayIndicator/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import type { ReactElement } from 'react'
+
+import { dayjs } from '@/utils'
+import { calcOffsetByTime } from '../../utils'
+
+interface TodayIndicatorProps {
+  originTime: number
+  timePxPerDay: number
+}
+
+export const TodayIndicator = (props: TodayIndicatorProps): ReactElement | null => {
+  const { originTime, timePxPerDay } = props
+
+  const offset = calcOffsetByTime({
+    originTime,
+    timePxPerDay,
+    time: dayjs().startOf('day').valueOf(),
+  })
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'absolute',
+          top: 1,
+          left: offset + (timePxPerDay - 30) / 2,
+          width: 30,
+          fontSize: 8,
+          lineHeight: '12px',
+          textAlign: 'center',
+          borderRadius: 999,
+          background: '#0ea5e9',
+          color: '#fff',
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
+        }}
+      >
+        今天
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          left: offset + (timePxPerDay - 7) / 2,
+          bottom: 0,
+          borderLeft: '4px solid transparent',
+          borderRight: '4px solid transparent',
+          borderBottom: '7px solid #0ea5e9',
+          pointerEvents: 'none',
+        }}
+      />
+    </>
+  )
+}

package/src/components/TimelineBar/components/index.ts

@@ -0,0 +1,4 @@
+export * from './Ticks'
+export * from './Guides'
+export * from './TodayIndicator'
+export * from './CurrentWeekHighlight'

package/src/components/TimelineBar/const.ts

@@ -0,0 +1,3 @@
+export const HEIGHT = 50
+export const ONE_DAY_MS = 24 * 60 * 60 * 1000
+export const WEEKDAY_LABELS = ['日', '一', '二', '三', '四', '五', '六']

package/src/components/TimelineBar/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useTickValues'
+export * from './useVisibleRange'
+export * from './useMonthGuides'
+export * from './useWeekGuides'
+export * from './useHighlightRange'

package/src/components/TimelineBar/hooks/useHighlightRange.ts

@@ -0,0 +1,21 @@
+import { calcOffsetByTime } from '../utils'
+
+interface HighlightRangeOption {
+  originTime: number
+  startTime: number
+  endTime: number
+  timePxPerDay: number
+}
+
+export const useHighlightRange = (option: HighlightRangeOption) => {
+  const { originTime, startTime, endTime, timePxPerDay } = option
+
+  const start = calcOffsetByTime({ originTime, time: startTime, timePxPerDay })
+  const end = calcOffsetByTime({ originTime, time: endTime, timePxPerDay })
+
+  const safeLeft = start
+  const safeRight = Math.max(safeLeft, end)
+  const safeWidth = Math.max(0, safeRight - safeLeft)
+
+  return { left: safeLeft, width: safeWidth }
+}

package/src/components/TimelineBar/hooks/useMonthGuides.ts

@@ -0,0 +1,40 @@
+import { dayjs } from '@/utils'
+import { calcOffsetByTime } from '../utils'
+
+interface GuideLine {
+  key: string
+  offset: number
+}
+
+interface MonthGuidesOption {
+  originTime: number
+  visibleDates: Date[]
+  timePxPerDay: number
+}
+
+export const useMonthGuides = (option: MonthGuidesOption): GuideLine[] => {
+  const { originTime, visibleDates, timePxPerDay } = option
+
+  if (!visibleDates.length) {
+    return []
+  }
+
+  const result: GuideLine[] = []
+
+  for (const date of visibleDates) {
+    const d = dayjs(date)
+    if (d.date() !== 1) {
+      continue
+    }
+
+    const time: number = d.startOf('month').startOf('day').valueOf()
+    const offset = calcOffsetByTime({ originTime, time, timePxPerDay })
+
+    result.push({
+      key: `${d.format('YYYY-MM')}-start`,
+      offset,
+    })
+  }
+
+  return result
+}

package/src/components/TimelineBar/hooks/useTickValues.ts

@@ -0,0 +1,18 @@
+import { dayjs } from '@/utils'
+
+interface TickValuesOption {
+  visibleStart: number
+  visibleEnd: number
+}
+
+export const useTickValues = (option: TickValuesOption) => {
+  const { visibleStart, visibleEnd } = option
+
+  const start = dayjs(visibleStart).startOf('day')
+  const end = dayjs(visibleEnd).endOf('day')
+  const days = end.diff(start, 'day') + 1
+
+  return Array.from({ length: days }).map((_, i: number) => (
+    start.add(i, 'day').toDate()
+  ))
+}

package/src/components/TimelineBar/hooks/useVisibleRange.ts

@@ -0,0 +1,43 @@
+import { useTickValues } from '../hooks'
+import { calcTimeByScreenOffset } from '.././utils'
+
+interface VisibleRangeOption {
+  x: number
+  originTime: number
+  containerWidth: number
+  timePxPerDay: number
+  minTime?: number
+  maxTime?: number
+}
+
+export const useVisibleRange = (option: VisibleRangeOption) => {
+  const { x, originTime, containerWidth, timePxPerDay, minTime, maxTime } = option
+
+  const lower: number = typeof minTime === 'number' ? minTime : Number.NEGATIVE_INFINITY
+  const upper: number = typeof maxTime === 'number' ? maxTime : Number.POSITIVE_INFINITY
+  const safeLower: number = Math.min(lower, upper)
+  const safeUpper: number = Math.max(lower, upper)
+
+  const rawVisibleStart: number = calcTimeByScreenOffset({ screenOffset: 0, x, originTime, timePxPerDay })
+  const rawVisibleEnd: number = calcTimeByScreenOffset({ screenOffset: containerWidth, x, originTime, timePxPerDay })
+
+  const visibleStart: number = Math.min(
+    safeUpper,
+    Math.max(safeLower, Math.min(rawVisibleStart, rawVisibleEnd)),
+  )
+  const visibleEnd: number = Math.max(
+    visibleStart,
+    Math.min(safeUpper, Math.max(safeLower, Math.max(rawVisibleStart, rawVisibleEnd))),
+  )
+
+  const visibleDates = useTickValues({
+    visibleStart,
+    visibleEnd,
+  })
+
+  return {
+    visibleStart,
+    visibleEnd,
+    visibleDates,
+  }
+}

package/src/components/TimelineBar/hooks/useWeekGuides.ts

@@ -0,0 +1,39 @@
+import { dayjs } from '@/utils'
+import { calcOffsetByTime } from '../utils'
+
+interface GuideLine {
+  key: string
+  offset: number
+}
+
+interface WeekGuidesOption {
+  originTime: number
+  visibleDates: Date[]
+  timePxPerDay: number
+}
+
+export const useWeekGuides = (option: WeekGuidesOption): GuideLine[] => {
+  const { originTime, visibleDates, timePxPerDay } = option
+
+  if (!visibleDates.length) {
+    return []
+  }
+
+  const result: GuideLine[] = []
+
+  for (const date of visibleDates) {
+    const d = dayjs(date)
+    if (d.day() !== 1) {
+      continue
+    }
+
+    const time: number = d.startOf('day').valueOf()
+    const offset = calcOffsetByTime({ originTime, time, timePxPerDay })
+    result.push({
+      key: d.format('YYYY-MM-DD'),
+      offset,
+    })
+  }
+
+  return result
+}

package/src/components/TimelineBar/index.tsx

@@ -0,0 +1,63 @@
+import { Ticks, Guides, TodayIndicator, CurrentWeekHighlight } from './components'
+
+import { useElement } from '@/hooks'
+import { useVisibleRange } from './hooks'
+
+import { HEIGHT } from './const'
+
+interface TimelineBarProps {
+  x?: number
+  minTime?: number
+  maxTime?: number
+  originTime: number
+  timePxPerDay?: number
+}
+
+export const TimelineBar = (props: TimelineBarProps) => {
+  const { originTime, x = 0, timePxPerDay = 30, minTime, maxTime } = props
+
+  const { elementRef, elementStyles } = useElement()
+
+  const { visibleDates } = useVisibleRange({
+    x,
+    originTime,
+    minTime,
+    maxTime,
+    timePxPerDay,
+    containerWidth: Number(elementStyles?.width),
+  })
+
+  return (
+    <div ref={elementRef} className='w-full border-b border-gray-200 bg-white/90 backdrop-blur overflow-hidden'>
+      <div
+        style={{
+          transform: `translateX(${x}px)`,
+          height: HEIGHT,
+          width: elementStyles?.width
+        }}
+      >
+        <Ticks
+          originTime={originTime}
+          timePxPerDay={timePxPerDay}
+          visibleDates={visibleDates}
+        />
+
+        <TodayIndicator
+          originTime={originTime}
+          timePxPerDay={timePxPerDay}
+        />
+
+        <Guides
+          originTime={originTime}
+          timePxPerDay={timePxPerDay}
+          visibleDates={visibleDates}
+        />
+
+        <CurrentWeekHighlight
+          originTime={originTime}
+          timePxPerDay={timePxPerDay}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/TimelineBar/utils.ts

@@ -0,0 +1,27 @@
+import { ONE_DAY_MS } from './const'
+
+interface ScreenOffsetOption {
+  x: number
+  screenOffset: number
+  originTime: number
+  timePxPerDay: number
+}
+
+export const calcTimeByScreenOffset = (option: ScreenOffsetOption): number => {
+  const { screenOffset, x, originTime, timePxPerDay } = option
+  const center = screenOffset - x
+  const diffDays = center / timePxPerDay
+  return originTime + diffDays * ONE_DAY_MS
+}
+
+interface TimeToOffsetOption {
+  time: number
+  originTime: number
+  timePxPerDay: number
+}
+
+export const calcOffsetByTime = (option: TimeToOffsetOption): number => {
+  const { originTime, time, timePxPerDay } = option
+  const diffDays = (time - originTime) / ONE_DAY_MS
+  return diffDays * timePxPerDay
+}

package/src/components/index.ts

@@ -16,6 +16,10 @@ export * from './Markdown'
 export * from './DynamicSelect'
 export * from './JsonRenderer'
 export * from './EnumTag'
+export * from './MindMap'
+export * from './ProgressButton'
+export * from './TimelineBar'
+export * from './Crud'
 
 // export * from './JsonView'
 

package/src/rn.ts

@@ -0,0 +1 @@
+export * from './rns';