@douyinfe/semi-ui 2.3.1 → 2.4.0-beta.0

package/table/_story/v2/FixedZIndex/index.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed z-index bug';
+export default function App() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'King 3',
+                    value: 'King 3',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            width: 200,
+            dataIndex: 'address',
+        },
+        {
+            title: 'Description',
+            // width: 400,
+            dataIndex: 'description',
+        },
+        {
+            fixed: 'right',
+            width: 250,
+            render: (text, record) => <Tooltip content={record.description}><Tag color="green">Show Info</Tag></Tooltip>
+        }
+    ];
+
+    let data = [];
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+        // fixed: true,
+    };
+
+    for (let i = 0; i < 46; i++) {
+        let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
+        let name = `Edward King ${i}`;
+        data.push({
+            key: `${ i}`,
+            name,
+            age,
+            address: `London, Park Lane no. ${i}`,
+            description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+        });
+    }
+
+    const scroll = { y: 300, x: 1500 };
+
+    return (
+        <div style={{ position: 'relative', height: '100vh' }}>
+            <div style={{ height: 60, background: 'red', position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2 }}>
+                Fixed Header
+            </div>
+            <Table
+                columns={columns}
+                dataSource={data}
+                scroll={scroll}
+                rowSelection={rowSelection}
+            />
+        </div>
+    );
+}

package/timePicker/TimePicker.tsx

@@ -90,6 +90,7 @@ export type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -187,6 +188,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: noop,
         onBlur: noop,
         onChange: noop,
+        onChangeWithDateFirst: true,
         use12Hours: false,
         focusOnOpen: false,
         onKeyDown: noop,
@@ -257,7 +259,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                 }
             },
             notifyOpenChange: (...args) => this.props.onOpenChange(...args),
-            notifyChange: (...args) => this.props.onChange && this.props.onChange(...args),
+            notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
             notifyFocus: (...args) => this.props.onFocus && this.props.onFocus(...args),
             notifyBlur: (...args) => this.props.onBlur && this.props.onBlur(...args),
             isRangePicker: () => this.props.type === strings.TYPE_TIME_RANGE_PICKER,

package/timePicker/__test__/timePicker.test.js

@@ -22,11 +22,13 @@ describe(`TimePicker`, () => {
         const defaultMinute = 24;
         const defaultSeconds = 18;
 
-        const onFoucs = sinon.spy();
+        const onFocus = sinon.spy();
+        const onChange = sinon.spy();
 
         const elem = mount(
             <TimePicker
-                onFocus={onFoucs}
+                onChange={onChange}
+                onFocus={onFocus}
                 panelHeader={<strong>Select Time</strong>}
                 locale={Locale.TimePicker}
                 localeCode={Locale.code}
@@ -59,7 +61,7 @@ describe(`TimePicker`, () => {
         // focus
         elem.find(`input`).simulate('focus');
         await sleep(200);
-        expect(onFoucs.calledOnce).toBeTruthy();
+        expect(onFocus.calledOnce).toBeTruthy();
 
         // input value
         const newInputHour = 10;
@@ -82,6 +84,11 @@ describe(`TimePicker`, () => {
 
         await sleep(200);
         expect(elem.state('open')).toBe(false);
+
+        expect(onChange.called).toBeTruthy();
+        const args = onChange.getCall(0).args;
+        expect(args[0] instanceof Date).toBe(true);
+        expect(typeof args[1]).toBe('string');
     });
 
     it(`test controlled value`, async () => {
@@ -280,4 +287,28 @@ describe(`TimePicker`, () => {
         expect(args[0]).toBe(undefined);
         expect(args[1]).toBe('');
     });
+
+    it('test onChangeWithDateFirst=false', async () => {
+        const onChange = sinon.spy();
+        let props = {
+            defaultValue: "10:23:15",
+            onChange,
+            defaultOpen: true,
+            onChangeWithDateFirst: false,
+            autofocus: true,
+            locale: Locale.TimePicker,
+            localeCode: Locale.code
+        };
+        const elem = mount(<TimePicker {...props} />);
+        // click minute
+        const minuteUl = elem.find(`.${BASE_CLASS_PREFIX}-timepicker-panel-list-minute .${BASE_CLASS_PREFIX}-scrolllist-list-outer ul`);
+        const minuteLis = minuteUl.find(`li`);
+
+        minuteUl.simulate('click', { target: minuteLis.at(0).getDOMNode(), nativeEvent: null });
+
+        expect(onChange.called).toBeTruthy();
+        const args = onChange.getCall(0).args;
+        expect(typeof args[0]).toBe('string');
+        expect(args[1] instanceof Date).toBe(true);
+    });
 });

package/timePicker/_story/timepicker.stories.js

@@ -262,3 +262,21 @@ export const ShowClear = () => (
     />
   </>
 );
+
+
+export const TimePickerWithOnChangeWithDateFirst = () => {
+  return (
+    <div>
+      onChangeWithDateFirst=true (default)
+      <TimePicker onChange={(...val) => console.log(...val)} />
+      <br />
+      onChangeWithDateFirst=false
+      <TimePicker onChangeWithDateFirst={false} onChange={(...val) => console.log(...val)} />
+      
+    </div>
+  );
+};
+
+TimePickerWithOnChangeWithDateFirst.story = {
+  name: 'OnChangeWithDateFirst',
+};

package/tree/treeNode.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/tree/constants';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
-import { debounce, isFunction, isString, get } from 'lodash';
+import { debounce, isFunction, isString, get, isEmpty } from 'lodash';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
@@ -392,7 +392,14 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                     ...dragProps
                 });
             } else {
-                return customLabel;
+                if (isEmpty(style)) {
+                    return customLabel;
+                } else {
+                    // In virtualization, props.style will contain location information
+                    return React.cloneElement(customLabel, {
+                        style: { ...get(customLabel, ['props', 'style']), ...style }
+                    });
+                }
             }
         }
         const labelCls = cls(`${prefixcls}-label`, {