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

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>
         );
     }