@douyinfe/semi-ui 2.17.1 → 2.19.0-alpha.1

package/anchor/index.tsx

@@ -290,7 +290,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
                     <div aria-hidden className={slideCls} style={{ height: scrollHeight }}>
                         <span className={slideBarCls} style={{ top: slideBarTop }} />
                     </div>
-                    <div className={anchorWrapper}>{children}</div>
+                    <div className={anchorWrapper} role="list">{children}</div>
                 </div>
             </AnchorContext.Provider>
         );

package/anchor/link.tsx

@@ -118,9 +118,9 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         const { activeLink, childMap } = this.context;
         const { href, children } = this.props;
         if (!this.context.autoCollapse) {
-            return this.props.children;
+            return <div role="list">{children}</div>;
         }
-        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? children : null;
+        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? <div role="list">{children}</div> : null;
     };
 
     render() {
@@ -134,7 +134,6 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         });
         const ariaProps = {
             'aria-disabled': disabled,
-            'aria-label': href,
         };
         if (active) {
             ariaProps['aria-details'] = 'active';
@@ -144,7 +143,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         }
 
         return (
-            <div className={linkCls} style={style}>
+            <div className={linkCls} style={style} role="listitem">
                 <div
                     role="link"
                     tabIndex={0}

package/autoComplete/__test__/autoComplete.test.js

@@ -191,7 +191,7 @@ describe('AutoComplete', () => {
         };
         let ac = getAc(props);
         expect(ac.exists(`.${BASE_CLASS_PREFIX}-autocomplete-loading-wrapper`)).toEqual(true);
-        expect(ac.exists(`.${BASE_CLASS_PREFIX}-select-option`)).toEqual(false);
+        expect(ac.exists(`.${BASE_CLASS_PREFIX}-autoComplete-option`)).toEqual(false);
     });
 
     it('【onSelect】trigger onSelect when click candidate option', () => {
@@ -204,7 +204,7 @@ describe('AutoComplete', () => {
             ...commonProps,
         };
         let ac = getAc(props);
-        let options = ac.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);
@@ -223,7 +223,7 @@ describe('AutoComplete', () => {
             ...commonProps,
         };
         let ac = getAc(props);
-        let options = ac.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);
@@ -269,7 +269,7 @@ describe('AutoComplete', () => {
             renderSelectedItem: option => option.email,
         };
         let ac = getAc(props);
-        let options = ac.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);
@@ -306,7 +306,7 @@ describe('AutoComplete', () => {
             value: '',
         };
         const ac = getAc(props);
-        ac.find(`.${BASE_CLASS_PREFIX}-select-option`)
+        ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`)
             .at(0)
             .simulate('click');
         expect(fakeOnChange.calledWith('XK')).toEqual(true);
@@ -374,7 +374,7 @@ describe('AutoComplete', () => {
         let event = { target: { value: 'abc' } };
         component.find('input').simulate('change', event);
         expect(spyOnChange.calledWith('abc')).toEqual(true);
-        let options = component.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = component.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);

package/autoComplete/index.tsx

@@ -14,7 +14,7 @@ import Popover from '../popover';
 import Input from '../input';
 import Trigger from '../trigger';
 
-import Option from '../select/option';
+import Option from './option';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import '@douyinfe/semi-foundation/autoComplete/autoComplete.scss';
 import { Motion } from '../_base/base';

package/autoComplete/option.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable max-len */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { isString } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/autoComplete/constants';
+import LocaleConsumer from '../locale/localeConsumer';
+import { IconTick } from '@douyinfe/semi-icons';
+import { getHighLightTextHTML } from '../_utils/index';
+import { Locale } from '../locale/interface';
+import { BasicOptionProps } from '@douyinfe/semi-foundation/autoComplete/optionFoundation';
+
+export interface OptionProps extends BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface renderOptionContentArgument {
+    config: {
+        searchWords: any;
+        sourceString: React.ReactNode;
+    };
+    children: React.ReactNode;
+    inputValue: string;
+    prefixCls: string;
+}
+class Option extends PureComponent<OptionProps> {
+    static isSelectOption = true;
+
+    static propTypes = {
+        children: PropTypes.node,
+        disabled: PropTypes.bool,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        selected: PropTypes.bool,
+        label: PropTypes.node,
+        empty: PropTypes.bool,
+        emptyContent: PropTypes.node,
+        onSelect: PropTypes.func,
+        focused: PropTypes.bool,
+        showTick: PropTypes.bool,
+        className: PropTypes.string,
+        style: PropTypes.object,
+        onMouseEnter: PropTypes.func,
+        prefixCls: PropTypes.string,
+        renderOptionItem: PropTypes.func,
+        inputValue: PropTypes.string,
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX_OPTION
+    };
+
+    onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent) {
+        const { props } = this;
+        const isDisabled = props.disabled;
+        if (!isDisabled) {
+            props.onSelect({ ...rest, value, label: label || children }, event);
+        }
+    }
+
+    renderOptionContent({ config, children, inputValue, prefixCls }: renderOptionContentArgument) {
+        if (isString(children) && inputValue) {
+            return getHighLightTextHTML(config as any);
+        }
+        return children;
+    }
+
+    render() {
+        const {
+            children,
+            disabled,
+            value,
+            selected,
+            label,
+            empty,
+            emptyContent,
+            onSelect,
+            focused,
+            showTick,
+            className,
+            style,
+            onMouseEnter,
+            prefixCls,
+            renderOptionItem,
+            inputValue,
+            ...rest
+        } = this.props;
+        const optionClassName = classNames(prefixCls, {
+            [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-selected`]: selected,
+            [`${prefixCls}-focused`]: focused,
+            [`${prefixCls}-empty`]: empty,
+            [className]: className,
+        });
+        const selectedIconClassName = classNames([`${prefixCls}-icon`]);
+
+        if (empty) {
+            if (emptyContent === null) {
+                return null;
+            }
+            return (
+                <LocaleConsumer<Locale['Select']> componentName="Select">
+                    {(locale: Locale['Select']) => (
+                        <div className={optionClassName} x-semi-prop="emptyContent">
+                            {emptyContent || locale.emptyText}
+                        </div>
+                    )}
+                </LocaleConsumer>
+            );
+        }
+
+        // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
+        if (typeof renderOptionItem === 'function') {
+            return renderOptionItem({
+                disabled,
+                focused,
+                selected,
+                style,
+                label,
+                value,
+                inputValue,
+                onMouseEnter: (e: React.MouseEvent) => onMouseEnter(e),
+                onClick: (e: React.MouseEvent) => this.onClick({ value, label, children, ...rest }, e),
+                ...rest
+            });
+        }
+
+        const config = {
+            searchWords: inputValue,
+            sourceString: children,
+            option: {
+                highlightClassName: `${prefixCls}-keyword`
+            }
+        };
+        return (
+            // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
+            <div
+                className={optionClassName}
+                onClick={e => {
+                    this.onClick({ value, label, children, ...rest }, e);
+                }}
+                onMouseEnter={e => onMouseEnter && onMouseEnter(e)}
+                role="option"
+                aria-selected={selected ? "true" : "false"}
+                aria-disabled={disabled ? "true" : "false"}
+                style={style}
+            >
+                {showTick ? (
+                    <div className={selectedIconClassName}>
+                        <IconTick />
+                    </div>
+                ) : null}
+                {isString(children) ? <div className={`${prefixCls}-text`}>{this.renderOptionContent({ children, config, inputValue, prefixCls })}</div> : children}
+            </div>
+        );
+    }
+}
+
+export default Option;

package/calendar/__test__/calendar.test.js

@@ -50,8 +50,6 @@ describe('Calendar', () => {
         expect(clickHandler2).toHaveBeenCalledTimes(0)
         monthWrapper.find('.semi-calendar-month-skeleton li').at(0).simulate('click')
         expect(clickHandler2).toHaveBeenCalledTimes(1)
-
-
     })
     
     it('test dateGridRender', ()=>{
@@ -160,4 +158,25 @@ describe('Calendar', () => {
         expect(dailyCalendar.find(`.eventDay`).length).toBe(eventOnJuly23.length)
 
     })
+
+    it('test weekStartsOn', () => {
+        const displayValue = new Date(2022, 7, 1, 8, 32, 0);
+
+        let calendar = mount(<Calendar
+                    height={400}
+                    mode={'month'}
+                    weekStartsOn={3}
+                    displayValue={displayValue}
+                ></Calendar>);
+        let firstHead = calendar.find('.semi-calendar-month-header li').at(0).text();
+        expect(firstHead).toEqual('周三');
+
+        let defaultCalendar = mount(<Calendar
+                    height={400}
+                    mode={'month'}
+                    displayValue={displayValue}
+                ></Calendar>);
+        let defaultFirstHead = defaultCalendar.find('.semi-calendar-month-header li').at(0).text();
+        expect(defaultFirstHead).toEqual('周日');
+    });
 })

package/calendar/_story/calendar.stories.js

@@ -527,3 +527,34 @@ class EventRenderDemo extends React.Component {
 }
 
 export const EventRender  = () => <EventRenderDemo />;
+
+
+export const WeekStartsOnDemo = () => {
+    const [v, setV] = useState(0);
+    return (
+        <div>
+            <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
+                <Radio value={1}>周一</Radio>
+                <Radio value={2}>周二</Radio>
+                <Radio value={3}>周三</Radio>
+                <Radio value={4}>周四</Radio>
+                <Radio value={5}>周五</Radio>
+                <Radio value={6}>周六</Radio>
+                <Radio value={0}>周日</Radio>
+            </RadioGroup>
+            <Calendar
+                mode="month"
+                weekStartsOn={v}
+                dateGridRender={(dateString, date) => {
+                    console.log(dateString);
+                    if (dateString === new Date(2019, 6, 16).toString()) {
+                    return (
+                        <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>123test</div>
+                    );
+                    }
+                    return null;
+                }}
+            ></Calendar>
+      </div>
+    )
+}

package/calendar/index.tsx

@@ -25,6 +25,7 @@ class Calendar extends BaseComponent<CalendarProps, {}> {
         })),
         mode: PropTypes.string,
         showCurrTime: PropTypes.bool,
+        weekStartsOn: PropTypes.number,
         scrollTop: PropTypes.number,
         onClick: PropTypes.func,
         renderTimeDisplay: PropTypes.func,
@@ -42,7 +43,8 @@ class Calendar extends BaseComponent<CalendarProps, {}> {
         mode: 'week',
         markWeekend: false,
         height: 600,
-        scrollTop: 400
+        scrollTop: 400,
+        weekStartsOn: 0,
     };
 
     render() {

package/calendar/interface.ts

@@ -1,4 +1,4 @@
-import { EventObject } from '@douyinfe/semi-foundation/calendar/foundation';
+import { EventObject, weeekStartsOnEnum } from '@douyinfe/semi-foundation/calendar/foundation';
 import { strings } from '@douyinfe/semi-foundation/calendar/constants';
 import { ArrayElement } from '../_base/base';
 import { BaseProps } from '../_base/baseComponent';
@@ -10,6 +10,7 @@ export interface CalendarProps extends BaseProps {
     events?: EventObject[];
     mode?: ArrayElement<typeof strings.MODE>;
     showCurrTime?: boolean;
+    weekStartsOn?: weeekStartsOnEnum;
     scrollTop?: number;
     onClick?: (e: React.MouseEvent, value: Date) => void;
     onClose?: (e: React.MouseEvent) => void;

package/carousel/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import  React, { ReactNode, Children, ReactChild, ReactFragment, ReactPortal } from 'react';
+import React, { ReactNode, Children, ReactChild, ReactFragment, ReactPortal } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import BaseComponent from "../_base/baseComponent";
@@ -135,7 +135,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     };
     
     handleAutoPlay = (): void => {
-        if (!this.foundation.getIsControledComponent()){
+        if (!this.foundation.getIsControlledComponent()){
             this.foundation.handleAutoPlay();
         }
     }
@@ -149,7 +149,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
 
     handleMouseLeave = (): void => {
         const { autoPlay } = this.props;
-        if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()){
+        if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControlledComponent()){
             this.foundation.handleAutoPlay();
         }
     }
@@ -158,7 +158,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         return this.foundation.onIndicatorChange(activeIndex);
     };
 
-    getChildren  = (): (ReactChild | ReactFragment | ReactPortal)[] => {
+    getChildren = (): (ReactChild | ReactFragment | ReactPortal)[] => {
         const { children: originChildren } = this.props;
         return Children.toArray(originChildren).filter(child=>{
             return React.isValidElement(child);
@@ -200,7 +200,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
                             [`${cssClasses.CAROUSEL_CONTENT}-item`]: true,
                             [`${cssClasses.CAROUSEL_CONTENT}-item-active`]: isCurrent,
                             [`${cssClasses.CAROUSEL_CONTENT}-item-slide-in`]:animation === 'slide' && !isInit && isCurrent,
-                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]:animation === 'slide'  && !isInit && index === preIndex,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]:animation === 'slide' && !isInit && index === preIndex,
                         })
                     });
                 })}

package/checkbox/checkbox.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { checkboxClasses as css } from '@douyinfe/semi-foundation/checkbox/constants';
+import { checkboxClasses as css, strings } from '@douyinfe/semi-foundation/checkbox/constants';
 import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
 import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
@@ -10,6 +10,7 @@ import '@douyinfe/semi-foundation/checkbox/checkbox.scss';
 import { Context, CheckboxContextType } from './context';
 import { isUndefined, isBoolean, noop } from 'lodash';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
+import { CheckboxType } from './checkboxGroup';
 export type CheckboxEvent = BasicCheckboxEvent;
 export type TargetObject = BasicTargetObject;
 
@@ -31,6 +32,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
     tabIndex?: number; // a11y: wrapper tabIndex
     addonId?: string;
     extraId?: string;
+    type?: CheckboxType;
 }
 interface CheckboxState {
     checked: boolean;
@@ -68,6 +70,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         'aria-label': PropTypes.string,
         tabIndex: PropTypes.number,
         preventScroll: PropTypes.bool,
+        type: PropTypes.string,
     };
 
     static defaultProps = {
@@ -76,6 +79,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onChange: noop,
         onMouseEnter: noop,
         onMouseLeave: noop,
+        type: 'default',
     };
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;
@@ -179,7 +183,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             value,
             role,
             tabIndex,
-            id
+            id,
+            type,
         } = this.props;
         const { checked, addonId, extraId, focusVisible } = this.state;
         const props: Record<string, any> = {
@@ -200,6 +205,9 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             props.isCardType = isCardType;
             props.isPureCardType = isPureCardType;
             props['name'] = this.context.checkboxGroup.name;
+        } else {
+            props.isPureCardType = type === strings.TYPE_PURECARD;
+            props.isCardType = type === strings.TYPE_CARD || props.isPureCardType;
         }
 
         const prefix = prefixCls || css.PREFIX;

package/checkbox/checkboxGroup.tsx

@@ -136,6 +136,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                             disabled={this.props.disabled}
                             value={option}
                             prefixCls={prefixCls}
+                            type={type}
                         >
                             {option}
                         </Checkbox>
@@ -152,6 +153,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                             className={option.className}
                             style={option.style}
                             onChange={option.onChange}
+                            type={type}
                         >
                             {option.label}
                         </Checkbox>