@douyinfe/semi-ui 2.9.0-beta.1 → 2.10.0-beta.0

package/form/hoc/withField.tsx

@@ -15,6 +15,7 @@ import { Col } from '../../grid';
 import { CallOpts, WithFieldOption } from '@douyinfe/semi-foundation/form/interface';
 import { CommonFieldProps, CommonexcludeType } from '../interface';
 import { Subtract } from 'utility-types';
+import { noop } from "lodash";
 
 const prefix = cssClasses.PREFIX;
 
@@ -121,6 +122,7 @@ function withField<
         const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
         const rulesRef = useRef(rules);
+        const validateRef = useRef(validate);
 
         // notNotify is true means that the onChange of the Form does not need to be triggered
         // notUpdate is true means that this operation does not need to trigger the forceUpdate
@@ -221,7 +223,7 @@ function withField<
                 let maybePromisedErrors;
                 // let errorThrowSync;
                 try {
-                    maybePromisedErrors = validate(val, values);
+                    maybePromisedErrors = validateRef.current(val, values);
                 } catch (err) {
                     // error throw by syncValidate
                     maybePromisedErrors = err;
@@ -258,7 +260,7 @@ function withField<
             if (transform) {
                 finalVal = transform(val);
             }
-            if (validate) {
+            if (validateRef.current) {
                 return _validate(finalVal, updater.getValue(), callOpts);
             } else if (latestRules) {
                 return _validateInternal(finalVal, callOpts);
@@ -357,7 +359,8 @@ function withField<
         // avoid hooks capture value, fixed issue 346
         useLayoutEffect(() => {
             rulesRef.current = rules;
-        }, [rules]);
+            validateRef.current = validate;
+        }, [rules, validate]);
 
         // exec validate once when trigger inlcude 'mount'
         useLayoutEffect(() => {
@@ -442,11 +445,11 @@ function withField<
             if (helpText) {
                 newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
             }
-            
+
             if (extraText) {
                 newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
             }
-            
+
             if (status === 'error') {
                 newProps['aria-errormessage'] = errorMessageId;
                 newProps['aria-invalid'] = true;

package/index.ts

@@ -12,6 +12,7 @@ export { default as ButtonGroup } from './button/buttonGroup';
 export { default as Calendar } from './calendar';
 export { default as Card } from './card';
 export { default as CardGroup } from './card/cardGroup';
+export { default as Carousel } from './carousel';
 export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxGroup } from './checkbox/checkboxGroup';
@@ -79,6 +80,7 @@ export { default as Upload } from './upload';
 export { default as Typography } from './typography';
 export { default as Transfer } from './transfer';
 
+
 export { default as LocaleProvider } from './locale/localeProvider';
 
 /** Form */

package/input/__test__/input.test.js

@@ -113,9 +113,18 @@ describe('Input', () => {
   });
 
   it('input password mode', () => {
-    const inputMode = mount(<Input mode="password" />);
-    const input = inputMode.find('input');
-    expect(input.instance().type).toEqual('password');
+    const inputMode = mount(<Input />);
+    expect(inputMode.find('input').instance().type).toEqual('text');
+    inputMode.setProps({ mode: 'password' }) ;
+    expect(inputMode.find('input').instance().type).toEqual('password');
+    inputMode.setProps({ mode: '' }) ;
+    expect(inputMode.find('input').instance().type).toEqual('text');
+  });
+
+  it('input password click eyes icon', () => {
+    const inputMode = mount(<Input mode='password' defaultValue="123456" autofocus/>);
+    inputMode.simulate('mouseEnter', {}).find(`.${BASE_CLASS_PREFIX}-input-modebtn`).simulate('click');
+    expect(inputMode.find('input').instance().type).toEqual('text');
   });
 
   it('input controlled mode', () => {

package/input/__test__/textArea.test.js

@@ -116,4 +116,57 @@ describe('TextArea', () => {
         const counter2 = textarea.find(`.${BASE_CLASS_PREFIX}-input-textarea-counter`);
         expect(counter2.hasClass('semi-input-textarea-counter-exceed')).toEqual(false);
     });
+
+    it('test minLength', () => {
+        let inputValue = '💖💖💖';
+        let inputValue1 = '💖💖💖💖';
+        let minLength = 4;
+        let event = { target: { value: inputValue } };
+        let event1 = { target: { value: inputValue1 } };
+
+        let onChange = value => {
+        console.log(value);
+        };
+        let spyOnChange = sinon.spy(onChange);
+        const textArea = mount(<TextArea onChange={spyOnChange} minLength={minLength} getValueLength={getValueLength} />);
+        const textAreaDom = textArea.find('textarea');
+
+        textAreaDom.simulate('change', event);
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(spyOnChange.calledWithMatch(textAreaDom)).toBe(true);
+        expect(textAreaDom.instance().minLength).toEqual(inputValue.length + (minLength - getValueLength(inputValue)));
+
+        textAreaDom.simulate('change', event1);
+        expect(spyOnChange.calledWithMatch(textAreaDom)).toBe(true);
+        expect(textAreaDom.instance().minLength).toEqual(minLength)
+    });
+
+    it('test maxLength + truncateValue', () => {
+        function truncateValue(inputValue, maxLength, getValueLength) {
+            let event = { target: { value: inputValue } };
+            let onChange = value => {
+                console.log(value);
+            };
+
+            let spyOnChange = sinon.spy(onChange);
+            const textArea = mount(<TextArea onChange={spyOnChange} maxLength={maxLength} getValueLength={getValueLength} />);
+            const textAreaDom = textArea.find('textarea');
+            textAreaDom.simulate('change', event);
+            expect(spyOnChange.calledOnce).toBe(true);
+            return textAreaDom.instance().value;
+        }
+
+        const testCases = [
+        // 自定义valueLength
+            ['Semi', 5, getValueLength, 'Semi'],
+            ['Semi Design', 4, getValueLength, 'Semi'],
+            ['💖💖💖💖💖💖💖💖💖💖👨👩👧👦', 10, getValueLength, '💖💖💖💖💖💖💖💖💖💖'],
+            ['💖', -1, getValueLength, ''],
+            ['🆗', 1, getValueLength, '🆗'],
+        ];
+
+        for (let [value, length, fc, result] of testCases) {
+            expect(truncateValue(value, length, fc)).toBe(result);
+        }
+  })
 })

package/lib/cjs/banner/index.js

@@ -92,7 +92,9 @@ class Banner extends _baseComponent.default {
     const closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       className: "".concat(prefixCls, "-close"),
       onClick: this.remove,
-      icon: closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      icon: closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        "aria-hidden": true
+      }),
       theme: "borderless",
       size: "small",
       type: "tertiary",
@@ -109,16 +111,20 @@ class Banner extends _baseComponent.default {
     } = this.props;
     const iconMap = {
       warning: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertTriangle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'warning'
       }),
       success: /*#__PURE__*/_react.default.createElement(_semiIcons.IconTickCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'success'
       }),
       info: /*#__PURE__*/_react.default.createElement(_semiIcons.IconInfoCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'info'
       }),
       danger: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'danger'
       })
     };
     let iconType = iconMap[type];

package/lib/cjs/carousel/CarouselArrow.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import { CarouselArrowProps } from "./interface";
+declare class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
+    renderLeftIcon: () => any;
+    renderRightIcon: () => any;
+    render(): ReactNode;
+}
+export default CarouselArrow;

package/lib/cjs/carousel/CarouselArrow.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/carousel/constants");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+class CarouselArrow extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.renderLeftIcon = () => {
+      return (0, _get2.default)(this.props, 'arrowProps.leftArrow.children', /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
+        "aria-label": "Previous index",
+        size: "inherit"
+      }));
+    };
+
+    this.renderRightIcon = () => {
+      return (0, _get2.default)(this.props, 'arrowProps.rightArrow.children', /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
+        "aria-label": "Next index",
+        size: "inherit"
+      }));
+    };
+  }
+
+  render() {
+    var _context, _context2, _context3;
+
+    const {
+      type,
+      theme,
+      prev,
+      next,
+      timing
+    } = this.props;
+    const classNames = (0, _classnames.default)({
+      [_constants.cssClasses.CAROUSEL_ARROW]: true,
+      [(0, _concat.default)(_context = "".concat(_constants.cssClasses.CAROUSEL_ARROW, "-")).call(_context, theme)]: theme,
+      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-hover")]: type === 'hover'
+    });
+    const leftClassNames = (0, _classnames.default)({
+      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-prev")]: true,
+      [(0, _concat.default)(_context2 = "".concat(_constants.cssClasses.CAROUSEL_ARROW, "-")).call(_context2, theme)]: theme
+    });
+    const rightClassNames = (0, _classnames.default)({
+      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-next")]: true,
+      [(0, _concat.default)(_context3 = "".concat(_constants.cssClasses.CAROUSEL_ARROW, "-")).call(_context3, theme)]: theme
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classNames
+    }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      // role='button'
+      className: leftClassNames,
+      onClick: (0, _throttle2.default)(prev, timing)
+    }, (0, _get2.default)(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      // role='button'
+      // tabIndex={0} 
+      className: rightClassNames,
+      onClick: (0, _throttle2.default)(next, timing)
+    }, (0, _get2.default)(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
+  }
+
+}
+
+var _default = CarouselArrow;
+exports.default = _default;

package/lib/cjs/carousel/CarouselIndicator.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import PropTypes from 'prop-types';
+import { CarouselIndicatorProps } from "./interface";
+declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorProps> {
+    static propTypes: {
+        activeKey: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        position: PropTypes.Requireable<"left" | "right" | "center">;
+        size: PropTypes.Requireable<"small" | "medium">;
+        style: PropTypes.Requireable<object>;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
+        total: PropTypes.Requireable<number>;
+        onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        type: PropTypes.Requireable<"line" | "dot" | "columnar">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
+    };
+    onIndicatorChange: (activeIndex: number) => void;
+    handleIndicatorClick: (activeIndex: number) => void;
+    handleIndicatorHover: (activeIndex: number) => void;
+    renderIndicatorContent(): ReactNode;
+    render(): ReactNode;
+}
+export default CarouselIndicator;

package/lib/cjs/carousel/CarouselIndicator.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/carousel/constants");
+
+var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+
+class CarouselIndicator extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.onIndicatorChange = activeIndex => {
+      this.props.onIndicatorChange(activeIndex);
+    };
+
+    this.handleIndicatorClick = activeIndex => {
+      const {
+        trigger
+      } = this.props;
+
+      if (trigger === 'click') {
+        this.onIndicatorChange(activeIndex);
+      }
+    };
+
+    this.handleIndicatorHover = activeIndex => {
+      const {
+        trigger
+      } = this.props;
+
+      if (trigger === 'hover') {
+        this.onIndicatorChange(activeIndex);
+      }
+    };
+  }
+
+  renderIndicatorContent() {
+    const {
+      total,
+      theme,
+      size,
+      activeIndex
+    } = this.props;
+    const indicatorContent = [];
+
+    for (let i = 0; i < total; i++) {
+      var _context, _context2;
+
+      indicatorContent.push( /*#__PURE__*/_react.default.createElement("span", {
+        // role='none' 
+        key: i,
+        "data-index": i,
+        className: (0, _classnames.default)(["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item")], {
+          ["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item-active")]: i === activeIndex,
+          [(0, _concat.default)(_context = "".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item-")).call(_context, theme)]: theme,
+          [(0, _concat.default)(_context2 = "".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item-")).call(_context2, size)]: size
+        }),
+        onClick: () => this.handleIndicatorClick(i),
+        onMouseEnter: () => this.handleIndicatorHover(i)
+      }));
+    }
+
+    return indicatorContent;
+  }
+
+  render() {
+    var _context3, _context4;
+
+    const _a = this.props,
+          {
+      type,
+      size,
+      theme,
+      style,
+      className,
+      position
+    } = _a,
+          restProps = __rest(_a, ["type", "size", "theme", "style", "className", "position"]);
+
+    const classNames = (0, _classnames.default)(className, {
+      [_constants.cssClasses.CAROUSEL_INDICATOR]: true,
+      [(0, _concat.default)(_context3 = "".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-")).call(_context3, type)]: type,
+      [(0, _concat.default)(_context4 = "".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-")).call(_context4, position)]: position
+    });
+    const indicatorContent = this.renderIndicatorContent();
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      className: classNames,
+      style: style
+    }, (0, _getDataAttr.default)(restProps)), indicatorContent);
+  }
+
+}
+
+CarouselIndicator.propTypes = {
+  activeKey: _propTypes.default.number,
+  className: _propTypes.default.string,
+  position: _propTypes.default.oneOf(_constants.strings.POSITION_MAP),
+  size: _propTypes.default.oneOf(_constants.strings.SIZE),
+  style: _propTypes.default.object,
+  theme: _propTypes.default.oneOf(_constants.strings.THEME_MAP),
+  total: _propTypes.default.number,
+  onIndicatorChange: _propTypes.default.func,
+  type: _propTypes.default.oneOf(_constants.strings.TYPE_MAP),
+  trigger: _propTypes.default.oneOf(_constants.strings.TRIGGER)
+};
+var _default = CarouselIndicator;
+exports.default = _default;

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

@@ -0,0 +1,58 @@
+import { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
+import PropTypes from 'prop-types';
+import BaseComponent from "../_base/baseComponent";
+import { CarouselProps } from './interface';
+import CarouselFoundation, { CarouselAdapter } from '@douyinfe/semi-foundation/lib/cjs/carousel/foundation';
+import '@douyinfe/semi-foundation/lib/cjs/carousel/carousel.css';
+export interface CarouselState {
+    activeIndex: number;
+    children: (ReactChild | ReactFragment | ReactPortal)[];
+    preIndex: number;
+    isReverse: boolean;
+    isInit: boolean;
+}
+declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
+    static propTypes: {
+        activeIndex: PropTypes.Requireable<number>;
+        animation: PropTypes.Requireable<"slide" | "fade">;
+        arrowProps: PropTypes.Requireable<object>;
+        autoPlay: PropTypes.Requireable<boolean | object>;
+        className: PropTypes.Requireable<string>;
+        defaultActiveIndex: PropTypes.Requireable<number>;
+        indicatorPosition: PropTypes.Requireable<"left" | "right" | "center">;
+        indicatorSize: PropTypes.Requireable<"small" | "medium">;
+        indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        arrowType: PropTypes.Requireable<"hover" | "always">;
+        showArrow: PropTypes.Requireable<boolean>;
+        showIndicator: PropTypes.Requireable<boolean>;
+        slideDirection: PropTypes.Requireable<"left" | "right">;
+        speed: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        trigger: PropTypes.Requireable<"hover" | "click">;
+    };
+    static defaultProps: CarouselProps;
+    foundation: CarouselFoundation;
+    constructor(props: CarouselProps);
+    get adapter(): CarouselAdapter<CarouselProps, CarouselState>;
+    static getDerivedStateFromProps(props: CarouselProps, state: CarouselState): Partial<CarouselState>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    play: () => void;
+    stop: () => void;
+    goTo: (targetIndex: number) => void;
+    prev: () => void;
+    next: () => void;
+    handleAutoPlay: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    onIndicatorChange: (activeIndex: number) => void;
+    getChildren: () => (ReactChild | ReactFragment | ReactPortal)[];
+    getValidIndex: (activeIndex: number) => number;
+    renderChildren: () => JSX.Element;
+    renderIndicator: () => JSX.Element;
+    renderArrow: () => JSX.Element;
+    render(): ReactNode;
+}
+export default Carousel;