@douyinfe/semi-ui 2.17.0-alpha.0 → 2.17.0-beta.1

package/datePicker/_story/datePicker.stories.js

@@ -10,7 +10,7 @@ import {
   startOfWeek,
   endOfWeek,
 } from 'date-fns';
-import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField, Button } from '../../index';
+import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField, Button, RadioGroup, Radio } from '../../index';
 
 // stores
 import NeedConfirmDemo from './NeedConfirm';
@@ -36,6 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
+import { Checkbox } from '../../checkbox';
 export * from './v2';
 
 export default {
@@ -189,6 +190,11 @@ const presets = [
     start: addDays(new Date(), 1),
     end: addDays(new Date(), 1),
   },
+  {
+    text: 'Today After Tomorrow',
+    start: addDays(new Date(), 2),
+    end: addDays(new Date(), 2),
+  },
   {
     text: 'Next Week',
     start: addWeeks(new Date(), 1),
@@ -200,24 +206,14 @@ const presets = [
     end: endOfMonth(addMonths(new Date(), 1)),
   },
   {
-    text: 'Today',
-    start: new Date(),
-    end: new Date(),
-  },
-  {
-    text: 'Tomorrow',
-    start: addDays(new Date(), 1),
-    end: addDays(new Date(), 1),
-  },
-  {
-    text: 'Next Week',
-    start: addWeeks(new Date(), 1),
-    end: addWeeks(new Date(), 2),
+    text: 'Next Bimonthly',
+    start: startOfMonth(addMonths(new Date(), 1)),
+    end: endOfMonth(addMonths(new Date(), 2)),
   },
   {
-    text: 'Next Month',
-    start: startOfMonth(addMonths(new Date(), 1)),
-    end: endOfMonth(addMonths(new Date(), 1)),
+    text: 'Next Quarter',
+    start: startOfMonth(addMonths(new Date(), 3)),
+    end: endOfMonth(addMonths(new Date(), 3)),
   },
 ];
 
@@ -225,40 +221,160 @@ export const DatePickerWithPresets = () => {
   const onPresetClick = (item, e) => {
     console.log('preset click', item, e);
   };
+  const [presetPosition, setPresetPosition] = useState('right');
+  const [insetInput, setInsetInput] = useState(false);
+  const [presetArr, setPresetArr] = useState(presets);
+
+   const BottomSlot = function(props) {
+        const { style } = props;
+        return (
+            <div style={{ padding: '12px 20px', ...style }}>
+                <div strong style={{ color: 'var(--semi-color-text-2)' }}>
+                    定版前请阅读
+                </div>
+                <div link={{ href: 'https://semi.design/', target: '_blank' }}>发版须知</div>
+            </div>
+        );
+    };
   return (
     <div style={demoDiv}>
       <span>带快捷选择的DatePicker</span>
+      <br/>
+      <br/>
+       <RadioGroup onChange={e=>setPresetPosition(e.target.value)} value={presetPosition} aria-label="选择快捷选择面板位置" name="preset-radio-group">
+            <Radio value={'left'}>left</Radio>
+            <Radio value={'right'}>right</Radio>
+            <Radio value={'top'}>top</Radio>
+            <Radio value={'bottom'}>bottom</Radio>
+        </RadioGroup>
+        <Checkbox value={insetInput} onChange={e=>setInsetInput(e.target.checked)}>insetInput</Checkbox>
+        <Checkbox value={presetArr} onChange={e=>setPresetArr(e.target.checked ? [...presets, ...presets, ...presets]:presets)}>more presets</Checkbox>
+       <br/>
+      <div>type="date"</div>
       <DatePicker
-        type="dateRange"
-        presets={presets}
+        type="date"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />
+      <br/>
+      <br/>
+      <div>type="dateTime"</div>
       <DatePicker
         type="dateTime"
-        presets={presets.map(preset => ({
+        insetInput={insetInput}
+        needConfirm
+        bottomSlot={<BottomSlot/>}
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
+          text: preset.text,
+          start: preset.start,
+        }))}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateRange"</div>
+      <DatePicker
+        type="dateRange"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateTimeRange"</div>
+      <DatePicker
+        type="dateTimeRange"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="month"</div>
+      <DatePicker
+        type="month"
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
           text: preset.text,
           start: preset.start,
         }))}
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />
+      <br/>
+      <br/>
+      <div>type="date" density="compact"</div>
+      <DatePicker
+        type="date"
+        presets={presetArr}
+        insetInput={insetInput}
+        density="compact"
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateTime" density="compact"</div>
       <DatePicker
         type="dateTime"
+        insetInput={insetInput}
         needConfirm
-        presets={presets.map(preset => ({
+        density="compact"
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
           text: preset.text,
           start: preset.start,
         }))}
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />
+      <br/>
+      <br/>
+      <div>type="dateRange" density="compact"</div>
+      <DatePicker
+        type="dateRange"
+        presets={presetArr}
+        density="compact"
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateTimeRange"  density="compact"</div>
+      <DatePicker
+        type="dateTimeRange"
+        density="compact"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="month" density="compact"</div>
       <DatePicker
         type="month"
-        presets={presets.map(preset => ({
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
           text: preset.text,
           start: preset.start,
         }))}
+        density="compact"
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />

package/datePicker/datePicker.tsx

@@ -76,6 +76,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         max: PropTypes.number, // only work when multiple is true
         placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
         presets: PropTypes.array,
+        presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
         onChange: PropTypes.func,
         onChangeWithDateFirst: PropTypes.bool,
         weekStartsOn: PropTypes.number,
@@ -134,6 +135,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         stopPropagation: true,
         motion: true,
         prefixCls: cssClasses.PREFIX,
+        presetPosition: 'bottom',
         // position: 'bottomLeft',
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,
         type: 'date',
@@ -415,7 +417,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             onPanelChange,
             timeZone,
             triggerRender,
-            insetInput
+            insetInput,
+            presetPosition
         } = this.props;
         const { cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
@@ -456,21 +459,49 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 focusRecordsRef={this.focusRecordsRef}
                 triggerRender={triggerRender}
                 insetInput={insetInput}
+                presetPosition={presetPosition}
+                renderQuickControls={this.renderQuickControls()}
+                renderDateInput={this.renderDateInput()}
             />
         );
     }
 
     renderQuickControls() {
-        const { presets, type } = this.props;
+        const { presets, type, presetPosition, insetInput } = this.props;
         return (
             <QuickControl
                 type={type}
                 presets={presets}
+                insetInput={insetInput}
+                presetPosition={presetPosition}
                 onPresetClick={(item, e) => this.foundation.handlePresetClick(item, e)}
             />
         );
     }
 
+    renderDateInput() {
+        const { insetInput, dateFnsLocale, density, type, format, rangeSeparator, defaultPickerValue } = this.props;
+        const { insetInputValue, value } = this.state;
+
+        const insetInputProps = {
+            dateFnsLocale,
+            format,
+            insetInputValue,
+            rangeSeparator,
+            type,
+            value: value as Date[],
+            handleInsetDateFocus: this.handleInsetDateFocus,
+            handleInsetTimeFocus: this.handleInsetTimeFocus,
+            onInsetInputChange: this.handleInsetInputChange,
+            rangeInputStartRef: this.rangeInputStartRef,
+            rangeInputEndRef: this.rangeInputEndRef,
+            density,
+            defaultPickerValue
+        };
+
+        return insetInput ? <DateInput {...insetInputProps} insetInput={true} /> : null;
+    }
+
     handleOpenPanel = () => this.foundation.openPanel();
     handleInputChange: DatePickerFoundation['handleInputChange'] = (...args) => this.foundation.handleInputChange(...args);
     handleInsetInputChange = (options: InsetInputChangeProps) => this.foundation.handleInsetInputChange(options);
@@ -626,7 +657,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator, defaultPickerValue } = this.props;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator, defaultPickerValue, presetPosition } = this.props;
         const { insetInputValue, value } = this.state;
         const wrapCls = classnames(
             cssClasses.PREFIX,
@@ -654,17 +685,18 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         };
 
         return (
-            <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
+            <div ref={this.panelRef} className={wrapCls} style={dropdownStyle} >
                 {topSlot && (
                     <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
                         {topSlot}
                     </div>
                 )}
-                {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
+                {presetPosition === "top" && this.renderQuickControls()}
+                {/* {insetInput && <DateInput {...insetInputProps} insetInput={true} />} */}
                 {this.adapter.typeIsYearOrMonth()
                     ? this.renderYearMonthPanel(locale, localeCode)
                     : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
-                {this.renderQuickControls()}
+                {presetPosition === "bottom" && this.renderQuickControls()}
                 {bottomSlot && (
                     <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
                         {bottomSlot}
@@ -676,7 +708,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderYearMonthPanel = (locale: Locale['DatePicker'], localeCode: string) => {
-        const { density } = this.props;
+        const { density, presetPosition } = this.props;
 
         const date = this.state.value[0];
         let year = 0;
@@ -698,6 +730,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 currentYear={year}
                 currentMonth={month}
                 density={density}
+                presetPosition={presetPosition}
+                renderQuickControls={this.renderQuickControls()}
+                renderDateInput={this.renderDateInput()}
             />
         );
     };

package/datePicker/monthsGrid.tsx

@@ -76,6 +76,9 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         onPanelChange: PropTypes.func,
         focusRecordsRef: PropTypes.object,
         triggerRender: PropTypes.func,
+        presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
+        renderQuickControls: PropTypes.node,
+        renderDateInput: PropTypes.node
     };
 
     static defaultProps = {
@@ -600,9 +603,10 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         );
     }
 
+
     render() {
         const { monthLeft, monthRight } = this.state;
-        const { type, insetInput } = this.props;
+        const { type, insetInput, presetPosition, renderQuickControls, renderDateInput } = this.props;
         const monthGridCls = classnames({
             [`${prefixCls }-month-grid`]: true,
         });
@@ -622,15 +626,23 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         const yearOpenType = this.getYAMOpenType();
 
         return (
-            <div
-                className={monthGridCls}
-                x-type={type}
-                x-panel-yearandmonth-open-type={yearOpenType}
-                // FIXME:
-                x-insetinput={insetInput ? "true" : "false"}
-                ref={current => this.cacheRefCurrent('monthGrid', current)}
-            >
-                {content}
+            <div style={{ display: 'flex' }}>
+                {presetPosition === "left" && renderQuickControls}
+                <div>
+                    {renderDateInput}
+                    <div
+                        className={monthGridCls}
+                        x-type={type}
+                        x-panel-yearandmonth-open-type={yearOpenType}
+                        // FIXME:
+                        x-insetinput={insetInput ? "true" : "false"}
+                        x-preset-position={renderQuickControls === null ? 'null' : presetPosition}
+                        ref={current => this.cacheRefCurrent('monthGrid', current)}
+                    >
+                        {content}
+                    </div>
+                </div>
+                {presetPosition === "right" && renderQuickControls}
             </div>
         );
     }

package/datePicker/quickControl.tsx

@@ -2,52 +2,98 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/datePicker/constants';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/datePicker/constants';
 import Button from '../button/index';
+import Typography from '../typography/index';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { PresetsType, PresetType } from '@douyinfe/semi-foundation/datePicker/foundation';
 
 const prefixCls = cssClasses.PREFIX;
+const { Text } = Typography;
 
 export interface QuickControlProps {
     presets: PresetsType;
+    presetPosition: typeof strings.PRESET_POSITION_SET[number];
     onPresetClick: (preset: PresetType, e: React.MouseEvent) => void;
     type: string;
+    insetInput: boolean;
 }
 
 class QuickControl extends PureComponent<QuickControlProps> {
     static propTypes = {
         presets: PropTypes.array,
+        presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
         onPresetClick: PropTypes.func,
-        type: PropTypes.string
+        type: PropTypes.string,
+        insetInput: PropTypes.bool
     };
 
     static defaultProps = {
         presets: [] as PresetsType,
+        presetPosition: 'bottom',
         onPresetClick: noop,
     };
 
     render() {
-        const { presets, onPresetClick, type } = this.props;
+        const { presets, onPresetClick, type, presetPosition, insetInput } = this.props;
+        const isTypeRange = type === 'dateRange' || type === 'dateTimeRange';
+        const isPanelTopAndBottom = presetPosition === 'top' || presetPosition === 'bottom';
+        const isMonth =  type === 'month';
+        const isTopAndBottomRange = isPanelTopAndBottom && isTypeRange;
+        const isTopAndBottomMonth = isPanelTopAndBottom && isMonth;
+
         const wrapperCls = classNames(`${prefixCls}-quick-control`, {
-            [`${prefixCls}-quick-control-${type}`]: type
+            [`${prefixCls}-quick-control-${type}`]: type,
+            [`${prefixCls}-quick-control-${presetPosition}`]: true,
+        });
+        const headerCls = classNames({
+            [`${prefixCls}-quick-control-header`]: true,
+        });
+        const contentWrapperCls = classNames({
+            [`${prefixCls}-quick-control-${presetPosition}-content-wrapper`]: true,
+        });
+        const contentCls = classNames({
+            [`${prefixCls}-quick-control-${presetPosition}-content`]: !isTopAndBottomRange && !isTopAndBottomMonth,
+            [`${prefixCls}-quick-control-${presetPosition}-range-content`]: isTopAndBottomRange,
+            [`${prefixCls}-quick-control-${presetPosition}-month-content`]: isTopAndBottomMonth,
         });
-        const itemCls = classNames(`${prefixCls}-quick-control-item`);
+        const itemCls = classNames({
+            [`${prefixCls}-quick-control-${presetPosition}-content-item`]: !isTopAndBottomRange && !isTopAndBottomMonth,
+            [`${prefixCls}-quick-control-${presetPosition}-range-content-item`]: isTopAndBottomRange,
+            [`${prefixCls}-quick-control-${presetPosition}-month-content-item`]: isTopAndBottomMonth,
+        });
+        const ellipsisCls = classNames({
+            [`${prefixCls}-quick-control-${presetPosition}-content-item-ellipsis`]: !isTopAndBottomRange && !isTopAndBottomMonth,
+            [`${prefixCls}-quick-control-${presetPosition}-range-content-item-ellipsis`]: isTopAndBottomRange,
+            [`${prefixCls}-quick-control-${presetPosition}-month-content-item-ellipsis`]: isTopAndBottomMonth,
+        });
+
+
         if (!presets.length) {
             return null;
         }
         return (
-            <div className={wrapperCls}>
-                {presets.map((item, index) => {
-                    const _item: PresetType = typeof item === 'function' ? item() : item;
-                    return (
-                        <div className={itemCls} onClick={e => onPresetClick(_item, e)} key={index}>
-                            <Button size="small" theme="borderless" type="primary">
-                                <span>{_item.text}</span>
-                            </Button>
-                        </div>
-                    );
-                })}
+            <div className={wrapperCls} x-insetinput={insetInput ? "true" : "false"}>
+                { !isPanelTopAndBottom && <div className={headerCls}>快捷选择</div>}
+                <div className={contentWrapperCls}>
+                    <div className={contentCls}>
+                        {presets.map((item, index) => {
+                            const _item: PresetType = typeof item === 'function' ? item() : item;
+                            return (
+                                <Button size="small" type="primary" onClick={e => onPresetClick(_item, e)} key={index}>         
+                                    <div className={itemCls}>
+                                        <Text 
+                                            ellipsis={{ showTooltip: true }}
+                                            className={ellipsisCls}
+                                        >
+                                            {_item.text}
+                                        </Text>
+                                    </div>
+                                </Button>
+                            );
+                        })}
+                    </div>
+                </div>
             </div>
         );
     }

package/datePicker/yearAndMonth.tsx

@@ -15,6 +15,8 @@ import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
 import { noop, stubFalse } from 'lodash';
 import { setYear, setMonth } from 'date-fns';
 import { Locale } from '../locale/interface';
+import { strings } from '@douyinfe/semi-foundation/datePicker/constants';
+
 
 const prefixCls = `${BASE_CLASS_PREFIX}-datepicker`;
 
@@ -36,6 +38,9 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
         noBackBtn: PropTypes.bool,
         disabledDate: PropTypes.func,
         density: PropTypes.string,
+        presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
+        renderQuickControls: PropTypes.node,
+        renderDateInput: PropTypes.node
     };
 
     static defaultProps = {
@@ -195,7 +200,7 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
     };
 
     render() {
-        const { locale, noBackBtn, density } = this.props;
+        const { locale, noBackBtn, density, presetPosition, renderQuickControls, renderDateInput } = this.props;
         const prefix = `${prefixCls}-yearmonth-header`;
         // i18n
         const selectDateText = locale.selectDate;
@@ -216,10 +221,31 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
                         </IconButton>
                     </div>
                 )}
-                <ScrollList>
-                    {this.renderColYear()}
-                    {this.renderColMonth()}
-                </ScrollList>
+                {
+                    presetPosition ? (
+                        <div style={{ display: 'flex' }}> 
+                            {presetPosition === "left" && renderQuickControls}
+                            <div>
+                                {renderDateInput}
+                                <ScrollList>
+                                    {this.renderColYear()}
+                                    {this.renderColMonth()}
+                                </ScrollList>
+                            </div>
+                            {presetPosition === "right" && renderQuickControls}
+                        </div>
+                    ) : 
+                        <>
+                            {renderDateInput}
+                            <ScrollList>
+                                {this.renderColYear()}
+                                {this.renderColMonth()}
+                            </ScrollList>
+                        </>
+
+                    
+                }
+             
             </React.Fragment>
         );
     }