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

package/input/_story/input.stories.js

@@ -884,4 +884,17 @@ export const ClearButton = () => {
 
 ClearButton.story = {
   name: 'clear button',
+};
+
+export const InputFocus = () => {
+  const ref = React.useRef();
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return (
+    <>
+      <Button onClick={handleClick}>focus input</Button>
+      <Input ref={ref} onChange={() => console.log('ref', ref) } onFocus={() => console.log('focus')} />
+    </>
+  );
 };

package/lib/cjs/button/buttonGroup.d.ts

@@ -9,6 +9,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    className?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {

package/lib/cjs/button/buttonGroup.js

@@ -30,6 +30,8 @@ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/button/constants");
 
 require("@douyinfe/semi-foundation/lib/cjs/button/button.css");
@@ -60,11 +62,13 @@ class ButtonGroup extends _baseComponent.default {
       disabled,
       size,
       type,
+      className,
       'aria-label': ariaLabel
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
+          rest = __rest(_a, ["children", "disabled", "size", "type", "className", 'aria-label']);
 
     let inner;
+    const cls = (0, _classnames.default)("".concat(prefixCls, "-group"), className);
 
     if (children) {
       var _context;
@@ -79,7 +83,7 @@ class ButtonGroup extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-group"),
+      className: cls,
       role: "group",
       "aria-label": ariaLabel
     }, inner);

package/lib/cjs/cascader/index.d.ts

@@ -187,6 +187,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderContent: () => JSX.Element;
     renderPlusN: (hiddenTag: Array<ReactNode>) => JSX.Element;
     renderMultipleTags: () => JSX.Element;
+    renderDisplayText: () => ReactNode;
     renderSelectContent: () => JSX.Element;
     renderSuffix: () => JSX.Element;
     renderPrefix: () => JSX.Element;

package/lib/cjs/cascader/index.js

@@ -20,14 +20,14 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -66,7 +66,7 @@ var _util = require("@douyinfe/semi-foundation/lib/cjs/cascader/util");
 
 var _treeUtil = require("@douyinfe/semi-foundation/lib/cjs/tree/treeUtil");
 
-var _context4 = _interopRequireDefault(require("../configProvider/context"));
+var _context5 = _interopRequireDefault(require("../configProvider/context"));
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
@@ -267,6 +267,36 @@ class Cascader extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayTag, !(0, _isEmpty2.default)(hiddenTag) && this.renderPlusN(hiddenTag));
     };
 
+    this.renderDisplayText = () => {
+      const {
+        displayProp,
+        separator,
+        displayRender
+      } = this.props;
+      const {
+        selectedKeys
+      } = this.state;
+      let displayText = '';
+
+      if (selectedKeys.size) {
+        const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
+
+        if (displayRender && typeof displayRender === 'function') {
+          displayText = displayRender(displayPath);
+        } else {
+          displayText = (0, _map.default)(displayPath).call(displayPath, (path, index) => {
+            var _context3;
+
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+              key: (0, _concat.default)(_context3 = "".concat(path, "-")).call(_context3, index)
+            }, index < displayPath.length - 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path, separator) : path);
+          });
+        }
+      }
+
+      return displayText;
+    };
+
     this.renderSelectContent = () => {
       const {
         placeholder,
@@ -274,7 +304,6 @@ class Cascader extends _baseComponent.default {
         multiple
       } = this.props;
       const {
-        selectedKeys,
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
@@ -289,9 +318,9 @@ class Cascader extends _baseComponent.default {
 
           return this.renderMultipleTags();
         } else {
-          const displayText = selectedKeys.size ? this.foundation.renderDisplayText([...selectedKeys][0]) : '';
+          const displayText = this.renderDisplayText();
           const spanCls = (0, _classnames.default)({
-            ["".concat(prefixcls, "-selection-placeholder")]: !displayText || !displayText.length
+            ["".concat(prefixcls, "-selection-placeholder")]: !displayText
           });
           return /*#__PURE__*/_react.default.createElement("span", {
             className: spanCls
@@ -835,7 +864,7 @@ class Cascader extends _baseComponent.default {
   }
 
   renderTagInput() {
-    var _context3;
+    var _context4;
 
     const {
       size,
@@ -854,7 +883,7 @@ class Cascader extends _baseComponent.default {
     const tagInputcls = (0, _classnames.default)("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
     const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
-    (0, _forEach.default)(_context3 = [...realKeys]).call(_context3, checkedKey => {
+    (0, _forEach.default)(_context4 = [...realKeys]).call(_context4, checkedKey => {
       if (!(0, _isEmpty2.default)(keyEntities[checkedKey])) {
         tagValue.push(keyEntities[checkedKey].valuePath);
       }
@@ -945,7 +974,7 @@ class Cascader extends _baseComponent.default {
 
 }
 
-Cascader.contextType = _context4.default;
+Cascader.contextType = _context5.default;
 Cascader.propTypes = {
   'aria-labelledby': _propTypes.default.string,
   'aria-invalid': _propTypes.default.bool,

package/lib/cjs/datePicker/dateInput.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DateInputFoundation, { DateInputAdapter, DateInputFoundationProps, RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
+import DateInputFoundation, { DateInputAdapter, DateInputFoundationProps, RangeType, InsetInputChangeProps, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { ValueType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     insetLabel?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -13,6 +13,8 @@ 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[];
 }
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes: {
@@ -39,6 +41,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeInputStartRef: PropTypes.Requireable<object>;
         rangeInputEndRef: PropTypes.Requireable<object>;
         rangeSeparator: PropTypes.Requireable<string>;
+        insetInput: PropTypes.Requireable<boolean>;
+        insetInputValue: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         showClear: boolean;
@@ -69,11 +73,14 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     handleRangeInputEndKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleRangeInputFocus: (e: React.MouseEvent<HTMLElement>, rangeType: RangeType) => void;
     handleRangeStartFocus: React.MouseEventHandler<HTMLElement>;
+    handleInsetInputChange: (options: InsetInputChangeFoundationProps) => void;
     getRangeInputValue: (rangeStart: string, rangeEnd: string) => string;
     renderRangePrefix(): JSX.Element;
     renderRangeSeparator(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeClearBtn(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeSuffix(suffix: React.ReactNode): JSX.Element;
     renderRangeInput(rangeProps: DateInputProps): JSX.Element;
+    renderInputInset(): JSX.Element;
+    renderTriggerInput(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/cjs/datePicker/dateInput.js

@@ -36,11 +36,13 @@ var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
 
 var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
 
+var _semiIcons = require("@douyinfe/semi-icons");
+
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _index = _interopRequireDefault(require("../input/index"));
 
-var _semiIcons = require("@douyinfe/semi-icons");
+var _insetInput = require("./insetInput");
 
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -52,7 +54,9 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-/* 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 */
 
@@ -96,6 +100,10 @@ class DateInput extends _baseComponent.default {
       this.handleRangeInputFocus(e, 'rangeStart');
     };
 
+    this.handleInsetInputChange = options => {
+      this.foundation.handleInsetInputChange(options);
+    };
+
     this.getRangeInputValue = (rangeStart, rangeEnd) => {
       var _context, _context2;
 
@@ -142,7 +150,8 @@ class DateInput extends _baseComponent.default {
       },
       notifyTabPress: function () {
         return _this.props.onRangeEndTabPress(...arguments);
-      }
+      },
+      notifyInsetInputChange: options => this.props.onInsetInputChange(options)
     });
   }
 
@@ -247,11 +256,11 @@ class DateInput extends _baseComponent.default {
     const rangePlaceholder = (0, _isArray.default)(placeholder) ? placeholder : [placeholder, placeholder];
     const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
     const inputLeftWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-range-input-wrapper-start"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart',
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart' && !disabled,
       ["".concat(prefixCls, "-range-input-wrapper-start-with-prefix")]: this.props.prefix || this.props.insetLabel
     });
     const inputRightWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-range-input-wrapper-end"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd'
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd' && !disabled
     });
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderRangePrefix(), /*#__PURE__*/_react.default.createElement("div", {
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeStart'),
@@ -290,7 +299,70 @@ class DateInput extends _baseComponent.default {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
-  render() {
+  renderInputInset() {
+    const {
+      type,
+      handleInsetDateFocus,
+      handleInsetTimeFocus,
+      value,
+      insetInputValue,
+      prefixCls,
+      rangeInputStartRef,
+      rangeInputEndRef,
+      density
+    } = this.props;
+
+    const _isRangeType = (0, _includes.default)(type).call(type, 'Range');
+
+    const newInsetInputValue = this.foundation.getInsetInputValue({
+      value,
+      insetInputValue
+    });
+    const {
+      datePlaceholder,
+      timePlaceholder
+    } = this.foundation.getInsetInputPlaceholder();
+    const insetInputWrapperCls = "".concat(prefixCls, "-inset-input-wrapper");
+    const separatorCls = "".concat(prefixCls, "-inset-input-separator");
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: insetInputWrapperCls,
+      "x-type": type
+    }, /*#__PURE__*/_react.default.createElement(_insetInput.InsetDateInput, {
+      forwardRef: rangeInputStartRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthLeft.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeStart')
+    }), /*#__PURE__*/_react.default.createElement(_insetInput.InsetTimeInput, {
+      disabled: !newInsetInputValue.monthLeft.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      valuePath: 'monthLeft.timeInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: handleInsetTimeFocus
+    }), _isRangeType && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: separatorCls
+    }, density === 'compact' ? null : '-'), /*#__PURE__*/_react.default.createElement(_insetInput.InsetDateInput, {
+      forwardRef: rangeInputEndRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthRight.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeEnd')
+    }), /*#__PURE__*/_react.default.createElement(_insetInput.InsetTimeInput, {
+      disabled: !newInsetInputValue.monthRight.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      valuePath: 'monthRight.timeInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: handleInsetTimeFocus
+    })));
+  }
+
+  renderTriggerInput() {
     const _a = this.props,
           {
       placeholder,
@@ -322,9 +394,11 @@ class DateInput extends _baseComponent.default {
       onRangeBlur,
       onRangeEndTabPress,
       rangeInputFocus,
-      rangeSeparator
+      rangeSeparator,
+      insetInput,
+      insetInputValue
     } = _a,
-          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator"]);
+          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue"]);
 
     const dateIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
       "aria-hidden": true
@@ -375,6 +449,13 @@ class DateInput extends _baseComponent.default {
     }));
   }
 
+  render() {
+    const {
+      insetInput
+    } = this.props;
+    return insetInput ? this.renderInputInset() : this.renderTriggerInput();
+  }
+
 }
 
 exports.default = DateInput;
@@ -401,7 +482,9 @@ DateInput.propTypes = {
   rangeInputFocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   rangeInputStartRef: _propTypes.default.object,
   rangeInputEndRef: _propTypes.default.object,
-  rangeSeparator: _propTypes.default.string
+  rangeSeparator: _propTypes.default.string,
+  insetInput: _propTypes.default.bool,
+  insetInputValue: _propTypes.default.object
 };
 DateInput.defaultProps = {
   showClear: true,

package/lib/cjs/datePicker/datePicker.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
+import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { DateInputProps } from './dateInput';
 import MonthsGrid, { MonthsGridProps } from './monthsGrid';
 import { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css';
 import { Locale } from '../locale/interface';
-import { RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
+import { InsetInputChangeProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
@@ -143,6 +143,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         autoSwitchDate: boolean;
         syncSwitchMonth: boolean;
         rangeSeparator: " ~ ";
+        insetInput: boolean;
     };
     triggerElRef: React.MutableRefObject<HTMLElement>;
     panelRef: React.RefObject<HTMLDivElement>;
@@ -171,6 +172,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     renderQuickControls(): JSX.Element;
     handleOpenPanel: () => void;
     handleInputChange: DatePickerFoundation['handleInputChange'];
+    handleInsetInputChange: (options: InsetInputChangeProps) => void;
     handleInputComplete: DatePickerFoundation['handleInputComplete'];
     handleInputBlur: DateInputProps['onBlur'];
     handleInputFocus: DatePickerFoundation['handleInputFocus'];
@@ -181,6 +183,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     handleRangeInputClear: DatePickerFoundation['handleRangeInputClear'];
     handleRangeEndTabPress: DatePickerFoundation['handleRangeEndTabPress'];
     isAnotherPanelHasOpened: (currentRangeInput: RangeType) => boolean;
+    handleInsetDateFocus: (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => void;
+    handleInsetTimeFocus: () => void;
+    handlePanelVisibleChange: (visible: boolean) => void;
     renderInner(extraProps?: Partial<DatePickerProps>): JSX.Element;
     handleConfirm: (e: React.MouseEvent) => void;
     handleCancel: (e: React.MouseEvent) => void;