@douyinfe/semi-ui 2.6.0-beta.0 → 2.7.0

package/cascader/_story/cascader.stories.js

@@ -346,37 +346,50 @@ export const Searchable = () => {
         filterLeafOnly={false}
         onChange={e => console.log(e)}
       />
+      <br />
+      <br />
+      <div>fix-1449,当 label 为 ReactNode 时，搜索显示结果[object object]</div>
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treedataWithNodeLabel}
+        placeholder="宁波为 ReactNode"
+        filterTreeNode
+      />
+      <br />
+      <br />
       <div>
-        <br />
-        <br />
-        <div>fix-1449,当 label 为 ReactNode 时，搜索显示结果[object object]</div>
-        <Cascader
-          style={{ width: 300 }}
-          treeData={treedataWithNodeLabel}
-          placeholder="宁波为 ReactNode"
-          filterTreeNode
-        />
-        <div>
-          filterTreeNode=false，且 label 为 ReactNode
-          时，配合displayRender使用，使得回显到input的内容符合预期
+        filterTreeNode=false，且 label 为 ReactNode
+        时，配合displayRender使用，使得回显到input的内容符合预期
+      </div>
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treedataWithNodeLabel}
+        placeholder="自定义回填时显示数据的格式"
+        displayRender={list =>
+          list.map((v, i) => {
+            return list.length - 1 === i ? (
+              <React.Fragment key={i}>{v}</React.Fragment>
+            ) : (
+              <React.Fragment key={i}>{v} / </React.Fragment>
+            );
+          })
+        }
+        defaultValue={['zhejiang', 'ningbo', 'jiangbei']}
+      />
+      <br />
+      <br />
+      <div>
+          v2.5 起，filterTreeNode=false，且 label 为 ReactNode
+          时，无配合displayRender 使用，回显到input的内容也是符合预期
         </div>
         <Cascader
           style={{ width: 300 }}
           treeData={treedataWithNodeLabel}
-          placeholder="自定义回填时显示数据的格式"
-          displayRender={list =>
-            list.map((v, i) => {
-              return list.length - 1 === i ? (
-                <React.Fragment key={i}>{v}</React.Fragment>
-              ) : (
-                <React.Fragment key={i}>{v} / </React.Fragment>
-              );
-            })
-          }
+          placeholder="宁波为 ReactNode"
+          
           defaultValue={['zhejiang', 'ningbo', 'jiangbei']}
         />
       </div>
-    </div>
   );
 };
 Searchable.parameters = {

package/cascader/index.tsx

@@ -711,9 +711,32 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         );
     };
 
+    renderDisplayText = (): ReactNode => {
+        const { displayProp, separator, displayRender } = this.props;
+        const { selectedKeys } = this.state;
+        let displayText: ReactNode = '';
+        if (selectedKeys.size) {
+            const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
+            if (displayRender && typeof displayRender === 'function') {
+                displayText = displayRender(displayPath);
+            } else {
+                displayText = displayPath.map((path: ReactNode, index: number)=>(
+                    <Fragment key={`${path}-${index}`}>
+                        {
+                            index<displayPath.length-1
+                                ? <>{path}{separator}</>
+                                : path
+                        }
+                    </Fragment>
+                ));
+            }
+        }
+        return displayText;
+    }
+
     renderSelectContent = () => {
         const { placeholder, filterTreeNode, multiple } = this.props;
-        const { selectedKeys, checkedKeys } = this.state;
+        const { checkedKeys } = this.state;
         const searchable = Boolean(filterTreeNode);
         if (!searchable) {
             if (multiple) {
@@ -722,11 +745,9 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 }
                 return this.renderMultipleTags();
             } else {
-                const displayText = selectedKeys.size ?
-                    this.foundation.renderDisplayText([...selectedKeys][0]) :
-                    '';
+                const displayText = this.renderDisplayText();
                 const spanCls = cls({
-                    [`${prefixcls}-selection-placeholder`]: !displayText || !displayText.length,
+                    [`${prefixcls}-selection-placeholder`]: !displayText,
                 });
                 return <span className={spanCls}>{displayText ? displayText : placeholder}</span>;
             }

package/datePicker/_story/v2/InsetInput.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { DatePicker, Space, Input, Button, Select } from '@douyinfe/semi-ui';
+import { Position } from '@douyinfe/semi-foundation/tooltip/foundation';
+import { strings } from '@douyinfe/semi-foundation/tooltip/constants';
+import * as dateFns from 'date-fns';
+
+/**
+ * Test with Chromatic
+ */
+export default function App() {
+    const spacing = [200, 400];
+    const [date, setDate] = React.useState();
+    const [insetInput, setInsetInput] = React.useState(true);
+    const [position, setPosition] = React.useState('leftTopOver');
+    const [needConfirm, setNeedConfirm] = React.useState(false);
+    const [density, setDensity] = React.useState(true);
+
+    const props = {
+        defaultOpen: true,
+        motion: false,
+        insetInput,
+        defaultPickerValue: '2021-12-01',
+        position,
+        density: density ? 'compact' : 'default',
+        autoAdjustOverflow: false,
+    };
+
+    const positionOptionList = strings.POSITION_SET.map((position) => ({
+        value: position,
+        label: position,
+        key: position,
+    }));
+
+    const triggerRender = ({ placeholder }) => {
+        const format = 'Pp';
+        const value = (date && dateFns.format(date, format)) || placeholder;
+        return <Input value={value} readOnly />;
+    };
+
+    const handleDateChange = (date) => {
+        setDate(date);
+    };
+
+    const handleBtnClick = () => {
+        setInsetInput(!insetInput);
+    };
+
+    const handleReset = () => {
+        setInsetInput(true);
+        setPosition('leftTopOver');
+    };
+
+    const handleToggleNeedConfirm = () => {
+        setNeedConfirm(!needConfirm);
+    };
+
+    const handleToggleDensity = () => {
+        setDensity(!density);
+    };
+
+    return (
+        <div style={{ height: '200vh' }}>
+            <div style={{ marginBottom: 12 }}>
+                <Space>
+                    <Button onClick={handleBtnClick}>
+                        {`insetInput=${insetInput}`}
+                    </Button>
+                    <Button onClick={handleToggleNeedConfirm}>
+                        {`needConfirm=${needConfirm}`}
+                    </Button>
+                    <Button onClick={handleToggleDensity}>
+                        {`小尺寸=${density}`}
+                    </Button>
+                    <Select
+                        style={{ width: 200 }}
+                        optionList={positionOptionList} 
+                        placeholder='选择position'
+                        value={position}
+                        onChange={setPosition}
+                        showClear
+                    />
+                    <Button onClick={handleReset} theme="solid">reset</Button>
+                </Space>
+            </div>
+            <Space wrap spacing={spacing}>
+                <DatePicker placeholder='选择单个日期' {...props} />
+                <DatePicker placeholder='选择月' {...props} type='month' />
+                <DatePicker placeholder='选择日期时间' {...props} type='dateTime' needConfirm={needConfirm} />
+                <DatePicker placeholder='选择日期范围' {...props} type='dateRange' />
+                <DatePicker placeholder='选择日期时间范围' {...props} type='dateTimeRange' needConfirm={needConfirm} />
+                <DatePicker placeholder='format=Pp' {...props} format='yyyy-MM-dd  HH:mm:ss' type='dateTimeRange' />
+            </Space>
+        </div>
+    );
+}
+
+App.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1800]
+    },
+};
+App.storyName = 'inset input';

package/datePicker/_story/v2/InsetInputE2E.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { DatePicker, Space, Button } from '@douyinfe/semi-ui';
+
+/**
+ * Test with Cypress
+ * Don't modify DOM structure
+ */
+export default function App() {
+    const [needConfirm, setNeedConfirm] = React.useState(false);
+
+    const spacing = [200, 400];
+    const props = {
+        insetInput: true,
+        defaultPickerValue: '2021-12-01',
+        motion: false,
+    };
+
+    const handleToggleNeedConfirm = () => {
+        setNeedConfirm(!needConfirm);
+    };
+
+    return (
+        <div style={{ height: '300vh' }}>
+            <div style={{ marginBottom: 12 }}>
+                <Space>
+                    <Button onClick={handleToggleNeedConfirm} data-cy="btn">
+                        {`needConfirm=${needConfirm}`}
+                    </Button>
+                </Space>
+            </div>
+            <Space wrap spacing={spacing}>
+                <div data-cy="date">
+                    <DatePicker placeholder="选择单个日期" {...props} />
+                </div>
+                <div data-cy="month">
+                    <DatePicker
+                        {...props}
+                        placeholder="选择月"
+                        type="month"
+                        defaultValue="2021-12"
+                        timePickerOpts={{
+                            scrollItemProps: { motion: false },
+                        }}
+                    />
+                </div>
+                <div data-cy="dateTime">
+                    <DatePicker placeholder="选择日期时间" {...props} type="dateTime" needConfirm={needConfirm} />
+                </div>
+                <div data-cy="dateRange">
+                    <DatePicker placeholder="选择日期范围" {...props} type="dateRange" />
+                </div>
+                <div data-cy="dateTimeRange">
+                    <DatePicker
+                        placeholder="选择日期时间范围"
+                        {...props}
+                        type="dateTimeRange"
+                        needConfirm={needConfirm}
+                    />
+                </div>
+                <div data-cy="customFormat">
+                    <DatePicker placeholder="选择日期范围" {...props} type="dateRange" format="Pp" />
+                </div>
+            </Space>
+        </div>
+    );
+}
+
+App.parameters = { chromatic: { disableSnapshot: true } };
+App.storyName = 'inset input e2e test';

package/datePicker/_story/v2/index.js

@@ -1,3 +1,5 @@
 export { default as YearButton } from './YearButton';
 export { default as PanelOpen  } from './PanelOpen';
 export { default as FixInputRangeFocus } from './FixInputRangeFocus';
+export { default as InsetInput  } from './InsetInput';
+export { default as InsetInputE2E  } from './InsetInputE2E';

package/datePicker/dateInput.tsx

@@ -1,22 +1,28 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
+
 import DateInputFoundation, {
     DateInputAdapter,
     DateInputFoundationProps,
-    RangeType
+    RangeType,
+    InsetInputChangeProps,
+    InsetInputChangeFoundationProps,
 } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/datePicker/constants';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import Input from '../input/index';
 import { IconCalendar, IconCalendarClock, IconClear } from '@douyinfe/semi-icons';
 import { BaseValueType, ValueType } from '@douyinfe/semi-foundation/datePicker/foundation';
 
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import Input from '../input/index';
+import { InsetDateInput, InsetTimeInput } from './insetInput';
+
 export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     insetLabel?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -26,9 +32,10 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.MouseEvent<HTMLInputElement>, rangeType?: RangeType) => void;
     onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
+    value?: Date[];
 }
 
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes = {
@@ -55,6 +62,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeInputStartRef: PropTypes.object,
         rangeInputEndRef: PropTypes.object,
         rangeSeparator: PropTypes.string,
+        insetInput: PropTypes.bool,
+        insetInputValue: PropTypes.object,
     };
 
     static defaultProps = {
@@ -91,6 +100,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             notifyRangeInputClear: (...args) => this.props.onRangeClear(...args),
             notifyRangeInputFocus: (...args) => this.props.onFocus(...args),
             notifyTabPress: (...args) => this.props.onRangeEndTabPress(...args),
+            notifyInsetInputChange: options => this.props.onInsetInputChange(options),
         };
     }
 
@@ -139,6 +149,10 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         this.handleRangeInputFocus(e, 'rangeStart');
     };
 
+    handleInsetInputChange = (options: InsetInputChangeFoundationProps) => {
+        this.foundation.handleInsetInputChange(options);
+    };
+
     getRangeInputValue = (rangeStart: string, rangeEnd: string) => {
         const { rangeSeparator } = this.props;
         const rangeInputValue = `${rangeStart}${rangeSeparator}${rangeEnd}`;
@@ -225,11 +239,11 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const rangePlaceholder = Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
         const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
         const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
-            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart',
-            [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel
+            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
+            [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel,
         });
         const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
-            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd'
+            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled,
         });
         return (
             <>
@@ -281,7 +295,72 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         );
     }
 
-    render() {
+    renderInputInset() {
+        const {
+            type,
+            handleInsetDateFocus,
+            handleInsetTimeFocus,
+            value,
+            insetInputValue,
+            prefixCls,
+            rangeInputStartRef,
+            rangeInputEndRef,
+            density,
+        } = this.props;
+
+        const _isRangeType = type.includes('Range');
+        const newInsetInputValue = this.foundation.getInsetInputValue({ value, insetInputValue });
+        const { datePlaceholder, timePlaceholder } = this.foundation.getInsetInputPlaceholder();
+
+        const insetInputWrapperCls = `${prefixCls}-inset-input-wrapper`;
+        const separatorCls = `${prefixCls}-inset-input-separator`;
+
+        return (
+            <div className={insetInputWrapperCls} x-type={type}>
+                <InsetDateInput
+                    forwardRef={rangeInputStartRef}
+                    insetInputValue={newInsetInputValue}
+                    placeholder={datePlaceholder}
+                    valuePath={'monthLeft.dateInput'}
+                    onChange={this.handleInsetInputChange}
+                    onFocus={e => handleInsetDateFocus(e, 'rangeStart')}
+                />
+                <InsetTimeInput
+                    disabled={!newInsetInputValue.monthLeft.dateInput}
+                    insetInputValue={newInsetInputValue}
+                    placeholder={timePlaceholder}
+                    type={type}
+                    valuePath={'monthLeft.timeInput'}
+                    onChange={this.handleInsetInputChange}
+                    onFocus={handleInsetTimeFocus}
+                />
+                {_isRangeType && (
+                    <>
+                        <div className={separatorCls}>{density === 'compact' ? null : '-'}</div>
+                        <InsetDateInput
+                            forwardRef={rangeInputEndRef}
+                            insetInputValue={newInsetInputValue}
+                            placeholder={datePlaceholder}
+                            valuePath={'monthRight.dateInput'}
+                            onChange={this.handleInsetInputChange}
+                            onFocus={e => handleInsetDateFocus(e, 'rangeEnd')}
+                        />
+                        <InsetTimeInput
+                            disabled={!newInsetInputValue.monthRight.dateInput}
+                            insetInputValue={newInsetInputValue}
+                            placeholder={timePlaceholder}
+                            type={type}
+                            valuePath={'monthRight.timeInput'}
+                            onChange={this.handleInsetInputChange}
+                            onFocus={handleInsetTimeFocus}
+                        />
+                    </>
+                )}
+            </div>
+        );
+    }
+
+    renderTriggerInput() {
         const {
             placeholder,
             type,
@@ -311,6 +390,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             onRangeEndTabPress,
             rangeInputFocus,
             rangeSeparator,
+            insetInput,
+            insetInputValue,
             ...rest
         } = this.props;
         const dateIcon = <IconCalendar aria-hidden />;
@@ -358,4 +439,9 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             />
         );
     }
+
+    render() {
+        const { insetInput } = this.props;
+        return insetInput ? this.renderInputInset() : this.renderTriggerInput();
+    }
 }