one-design-next 0.0.4-alpha.57

package/dist/date-picker/style/index.css

@@ -0,0 +1,548 @@
+html {
+  --odn-dp-padding-block-end: 16px;
+  --odn-dp-padding-inline: 16px;
+  --odn-dp-border-radius: 6px;
+  --odn-dp-nav-padding-block-start: 6px;
+  --odn-dp-nav-padding-block-end: 6px;
+  --odn-dp-nav-padding-inline: 16px;
+  --odn-dp-nav-shadow: 0 -1px 0 #e6e6e6 inset;
+  --odn-dp-nav-button-size: 30px;
+  --odn-dp-month-margin-block-start: 12px;
+  --odn-dp-month-margin-block-end: 0px;
+  --odn-dp-month-margin-inline-start: 0px;
+  --odn-dp-month-margin-inline-end: 0px;
+  --odn-dp-weekday-width: 30px;
+  --odn-dp-weekday-height: 30px;
+  --odn-dp-weekday-font-size: 13px;
+  --odn-dp-weekday-font-weight: 600;
+  --odn-dp-weekday-color: #000;
+  --odn-dp-table-row-gap: 0px;
+  --odn-dp-day-size: 30px;
+  --odn-dp-td-hover-fill-offset-y: 0px;
+  --odn-dp-td-hover-fill-offset-x: 0px;
+  --odn-dp-hover-fill-color: rgba(33, 34, 38, 0.05);
+}
+
+[data-odn-date-picker-popup] {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+}
+
+[data-odn-date-picker-shortcuts] {
+  flex: none;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  width: 100px;
+  box-shadow: 1px 0 0 0 #ebebeb;
+}
+
+[data-odn-date-picker-shortcut] {
+  padding-left: 12px;
+  padding-right: 8px;
+  max-width: 100%;
+  line-height: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-odn-date-picker-shortcut-active=true] {
+  font-weight: 500;
+  color: var(--odn-color-primary);
+}
+
+[data-odn-date-picker-popup-content] {
+  flex: 1;
+}
+
+[data-odn-date-picker-caption-nav] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--odn-dp-nav-padding-block-start) var(--odn-dp-nav-padding-inline) var(--odn-dp-nav-padding-block-end);
+  box-shadow: var(--odn-dp-nav-shadow);
+}
+
+[data-odn-date-picker-caption-nav-button] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--odn-dp-nav-button-size);
+  height: var(--odn-dp-nav-button-size);
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+[data-odn-date-picker-caption-nav-icon] {
+  fill: currentcolor;
+}
+
+[data-odn-date-picker-caption-nav-button-disabled=true] {
+  color: #c7c7c7;
+  pointer-events: none;
+}
+
+[data-odn-date-picker-caption-select] {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: initial;
+}
+
+[data-odn-date-picker-caption-select-input] {
+  position: relative;
+  z-index: 1;
+  padding-left: 11px;
+  width: 100%;
+  font-size: 13px;
+  font-weight: 600;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  appearance: none;
+}
+[data-odn-date-picker-caption-select-input] option {
+  background-color: transparent !important;
+}
+
+[data-odn-date-picker-caption-select-input]:focus {
+  outline: none;
+}
+
+[data-odn-date-picker-caption-select-month] [data-odn-date-picker-caption-select-input] {
+  letter-spacing: -0.5px;
+}
+
+[data-odn-date-picker-caption-icon] {
+  position: absolute;
+  top: 6px;
+  right: 3px;
+  fill: #6b6b6b;
+}
+
+[data-odn-date-picker-container] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-odn-date-picker-container-picker=day] {
+  width: 132px;
+}
+
+[data-odn-date-picker-container-picker=week],
+[data-odn-date-picker-container-picker=month],
+[data-odn-date-picker-container-picker=quarter],
+[data-odn-date-picker-container-picker=year] {
+  width: 120px;
+}
+
+[data-odn-date-picker-container-disabled=true] [data-odn-date-picker-input] {
+  color: var(--odn-color-black-8);
+  background: var(--odn-color-black-3);
+  border: 1px solid var(--odn-color-black-6);
+  cursor: not-allowed;
+}
+[data-odn-date-picker-container-disabled=true] [data-odn-date-picker-icon-container] {
+  cursor: not-allowed;
+}
+[data-odn-date-picker-container-disabled=true] [data-odn-date-picker-icon] {
+  color: var(--odn-color-black-8);
+}
+
+[data-odn-date-picker-container-selected=true][data-odn-date-picker-container-disabled=false][data-odn-date-picker-container-allow-clear=true]:hover [data-odn-date-picker-icon-clear] {
+  opacity: 1;
+}
+[data-odn-date-picker-container-selected=true][data-odn-date-picker-container-disabled=false][data-odn-date-picker-container-allow-clear=true]:hover [data-odn-date-picker-icon-calendar] {
+  opacity: 0;
+}
+
+[data-odn-date-picker-container-range] {
+  width: 242px;
+}
+
+[data-odn-date-picker-input] {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  font-family: inherit;
+  text-align: inherit;
+  line-height: 1.5;
+  color: #1f1f1f;
+  background-color: #fff;
+  border-radius: var(--odn-dp-border-radius);
+  outline: none;
+  appearance: none;
+  transition: 0.2s cubic-bezier(0.32, 0.72, 0, 1) background-color, 0.2s cubic-bezier(0.32, 0.72, 0, 1) border-color;
+  padding: 6px 32px 6px 12px;
+  height: 36px;
+  font-size: 14px;
+  border: 1px solid var(--odn-color-black-6);
+}
+
+[data-odn-date-picker-input-format] {
+  cursor: pointer;
+}
+
+[data-odn-date-picker-input]:not([data-odn-date-picker-input-disabled=true]):hover {
+  border: 1px solid var(--odn-color-black-7);
+}
+[data-odn-date-picker-input]:not([data-odn-date-picker-input-disabled=true]):focus {
+  border: 1px solid var(--odn-color-primary);
+}
+
+[data-odn-date-picker-container-allow-clear=false] [data-odn-date-picker-icon-container],
+[data-odn-date-picker-container-selected=false] [data-odn-date-picker-icon-container] {
+  pointer-events: none;
+}
+
+[data-odn-date-picker-icon-container] {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  right: 8px;
+  width: 16px;
+  height: 16px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+[data-odn-date-picker-icon] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-date-picker-icon-calendar] {
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-date-picker-icon-clear] {
+  opacity: 0;
+  color: var(--odn-color-black-7);
+}
+[data-odn-date-picker-icon-clear]:hover {
+  color: var(--odn-color-black-8);
+}
+[data-odn-date-picker-icon-clear]:active {
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-date-picker-caption-nav-hover-fill] {
+  position: absolute;
+  top: 10px;
+  left: 16px;
+  height: var(--odn-dp-nav-button-size);
+  background-color: transparent;
+  pointer-events: none;
+  border-radius: 4px;
+  transition: left 0.15s cubic-bezier(0.32, 0.72, 0, 1), width 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-date-picker-caption-nav-hover-fill-inner] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-date-picker-popup-picker=week] [data-odn-date-picker-td-hover-fill] {
+  width: calc(var(--odn-dp-day-size) * 7);
+}
+
+[data-odn-date-picker-td-hover-fill] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--odn-dp-day-size);
+  height: var(--odn-dp-day-size);
+  pointer-events: none;
+  transition: top 0.15s cubic-bezier(0.32, 0.72, 0, 1), left 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-date-picker-td-hover-fill-inner] {
+  position: absolute;
+  top: var(--odn-dp-td-hover-fill-offset-y);
+  left: var(--odn-dp-td-hover-fill-offset-x);
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.rdp-root {
+  position: relative;
+}
+
+.rdp-months {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding-right: var(--odn-dp-padding-inline);
+  padding-bottom: var(--odn-dp-padding-block-end);
+  padding-left: var(--odn-dp-padding-inline);
+}
+
+.rdp-month_caption {
+  text-align: center;
+}
+
+.rdp-caption_label,
+.rdp-dropdowns {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  padding: var(--odn-dp-nav-padding-block-start) calc(var(--odn-dp-nav-padding-inline) * -1) var(--odn-dp-nav-padding-block-end);
+  height: calc(var(--odn-dp-nav-button-size) + var(--odn-dp-nav-padding-block-start) + var(--odn-dp-nav-padding-block-end));
+  pointer-events: none;
+}
+
+.rdp-caption_label {
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.rdp-month_grid {
+  margin: var(--odn-dp-month-margin-block-start) var(--odn-dp-month-margin-inline-start) var(--odn-dp-month-margin-block-end) var(--odn-dp-month-margin-inline-end);
+}
+
+.rdp-weekday {
+  padding: 0;
+  padding-bottom: var(--odn-dp-table-row-gap);
+  width: var(--odn-dp-weekday-width);
+  height: calc(var(--odn-dp-weekday-height) + var(--odn-dp-table-row-gap));
+  vertical-align: middle;
+  text-align: center;
+  color: var(--odn-dp-weekday-color);
+  font-size: var(--odn-dp-weekday-font-size);
+  font-weight: var(--odn-dp-weekday-font-weight);
+}
+
+.rdp-week_number {
+  color: #c7c7c7;
+  font-weight: 400;
+}
+
+.rdp-week_number,
+.rdp-weekdays,
+.rdp-week {
+  border-bottom: none;
+}
+
+.rdp-week:not(:last-child) .rdp-day {
+  padding-bottom: var(--odn-dp-table-row-gap);
+}
+
+.rdp-day,
+.rdp-week_number {
+  position: relative;
+  display: table-cell;
+  padding: 0;
+  width: var(--odn-dp-day-size);
+  height: var(--odn-dp-day-size);
+  vertical-align: middle;
+  text-align: center;
+  font-size: 13px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.1s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.rdp-disabled {
+  pointer-events: none;
+  color: #c7c7c7;
+}
+
+.rdp-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.rdp-outside {
+  color: #c7c7c7;
+}
+
+.rdp-range_end [data-odn-date-picker-day] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp-range_start [data-odn-date-picker-day] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp-range_middle [data-odn-date-picker-day] {
+  font-weight: 400;
+  color: #1f1f1f;
+  background: #eaf0fd;
+  border-radius: 0;
+}
+
+[data-odn-date-picker-day] {
+  width: var(--odn-dp-day-size);
+  height: var(--odn-dp-day-size);
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+}
+
+[data-odn-date-picker-locale=enUS] [data-odn-date-picker-caption-select-year] {
+  width: 66px;
+}
+
+[data-odn-date-picker-locale=zhCN] [data-odn-date-picker-caption-select-year] {
+  width: 80px;
+}
+
+[data-odn-date-picker-caption-select-month] {
+  width: 55px;
+}
+
+[data-odn-date-picker-locale=zhCN] .rdp-dropdowns {
+  flex-direction: row-reverse;
+}
+
+[data-odn-date-picker-day-selected=true],
+[data-odn-date-picker-day-range-start=true],
+[data-odn-date-picker-day-range-end=true] {
+  color: #fff;
+  background-color: var(--odn-color-primary);
+  font-weight: 600;
+}
+
+[data-odn-date-picker-day-range-start=true],
+[data-odn-date-picker-day-range-start-hover=true] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[data-odn-date-picker-day-range-start-hover=true]:not([data-odn-date-picker-day-range-end=true]),
+[data-odn-date-picker-day-range-end-hover=true]:not([data-odn-date-picker-day-range-start=true]) {
+  background: #d4e1fc;
+}
+
+[data-odn-date-picker-day-range-end=true],
+[data-odn-date-picker-day-range-end-hover=true] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+[data-odn-date-picker-day-selected-range=true] {
+  background: #eaf0fd;
+  border-radius: 0;
+}
+
+[data-odn-date-picker-day-selected-range=true]:hover {
+  background: #d4e1fc;
+}
+
+[data-odn-date-picker-container-light=true] [data-odn-date-picker-input] {
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+[data-odn-date-picker-container-light=true] [data-odn-date-picker-input]:hover {
+  border: 1px solid transparent;
+}
+[data-odn-date-picker-container-light=true] [data-odn-date-picker-input]:focus {
+  background-color: #fff;
+  border: 1px solid var(--odn-color-primary);
+}
+
+[data-odn-date-picker-grid-popup] {
+  min-width: 242px;
+}
+
+[data-odn-date-picker-grid-caption] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--odn-dp-nav-padding-inline);
+  height: 50px;
+  font-size: 13px;
+  font-weight: 600;
+}
+[data-odn-date-picker-grid-caption] [data-odn-date-picker-caption-nav] {
+  line-height: 30px;
+  justify-content: center;
+  pointer-events: none;
+}
+
+[data-odn-date-picker-grid-body] {
+  display: grid;
+  row-gap: 4px;
+  grid-template-columns: repeat(4, auto);
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+}
+
+[data-odn-date-picker-grid-item-wrapper] {
+  width: 44px;
+  height: 36px;
+}
+
+[data-odn-date-picker-grid-item] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 36px;
+  font-size: 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-odn-date-picker-grid-item]:not([data-odn-date-picker-grid-item-disabled=true]):hover {
+  color: var(--odn-color-primary);
+}
+
+[data-odn-date-picker-grid-item-disabled=true] {
+  cursor: not-allowed;
+  color: #c7c7c7;
+}
+
+[data-odn-date-picker-grid-item][data-odn-date-picker-grid-item-active=true] {
+  color: #fff;
+  background-color: var(--odn-color-primary);
+}
+[data-odn-date-picker-grid-item][data-odn-date-picker-grid-item-active=true]:hover {
+  color: #fff;
+}
+
+[data-odn-date-picker-prefix] {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 11px;
+  padding-right: 4px;
+  color: var(--odn-color-black-9);
+  font-size: 14px;
+}

package/dist/date-picker/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/date-picker/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/date-range-picker/index.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DatePickerCommonProps } from '../date-picker';
+import '../date-picker/style';
+export interface DatePickerRangeProps extends DatePickerCommonProps {
+    /**
+     * @description 值
+     */
+    value?: [Date, Date] | null;
+    /**
+     * @description 值变化回调, 参数为日期区间和 info 对象
+     */
+    onChange?: (date: [Date, Date] | null, info: {
+        dateString: string;
+    }) => void;
+    /**
+     * @description 开始日期选择回调
+     */
+    onStartDaySelect?: (date?: Date) => void;
+    /**
+     * @description 结束日期选择回调
+     */
+    onEndDaySelect?: (date?: Date) => void;
+    /**
+     * @description 快捷选项
+     */
+    shortcuts?: {
+        label: string;
+        value: [Date, Date];
+    }[];
+    /**
+     * @description 自定义日期格式，当使用自定义格式时，将不提供 input 的输入功能
+     */
+    format?: (date: [Date, Date] | null, info: {
+        dateString: string;
+    }) => string;
+    /**
+     * @description 最多选择天数
+     */
+    maxDays?: number;
+    /**
+     * @description 最少选择天数
+     */
+    minDays?: number;
+}
+declare const DateRangePicker: ({ allowClear, minDate, maxDate, value: valueProp, onChange, visible: visibleProp, onVisibleChange, disabled, lang, disabledDays, placeholder, onStartDaySelect, onEndDaySelect, shortcuts, popupRender, light, triggerElement, popupStyle, captionLayout, captionPrevIcon, captionNextIcon, components, classNames, format, closeOnSelect, onClick, maxDays, minDays, prefix, ...otherProps }: DatePickerRangeProps) => React.JSX.Element;
+export default DateRangePicker;