fix(typo): resolve some spelling mistakes (#1050)

* fix(typo): controlled word spell mistake

* fix(typo): spell issues from select test file

packages/semi-foundation/carousel/foundation.ts

@@ -38,7 +38,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(activeIndex);
         this._adapter.setIsReverse(stateActiveIndex > targetIndex);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -50,7 +50,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex + 1);
         this._adapter.setIsReverse(false);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -62,7 +62,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex - 1);
         this._adapter.setIsReverse(true);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -110,7 +110,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         return speed;
     }
 
-    getIsControledComponent(): boolean {
+    getIsControlledComponent(): boolean {
         return this._isInProps('activeIndex');
     }
 
@@ -135,7 +135,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         this._adapter.setIsReverse(stateActiveIndex > activeIndex);
         this._notifyChange(activeIndex);
-        if (!this.getIsControledComponent()) {
+        if (!this.getIsControlledComponent()) {
             this.handleNewActiveIndex(activeIndex);
         }
     }

packages/semi-foundation/switch/foundation.ts

@@ -30,8 +30,8 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
 
     handleChange(checked: boolean, e: any): void {
         const propChecked = this.getProps().checked;
-        const isControledComponent = typeof propChecked !== 'undefined';
-        if (isControledComponent) {
+        const isControlledComponent = typeof propChecked !== 'undefined';
+        if (isControlledComponent) {
             this._adapter.notifyChange(checked, e);
         } else {
             this._adapter.setNativeControlChecked(checked);

packages/semi-ui/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,
                         })
                     });
                 })}

packages/semi-ui/radio/_story/radio.stories.js

@@ -196,7 +196,7 @@ const RadioGroup1 = () => {
     </div>
   );
 };
-class RadioWithControled extends React.Component {
+class RadioWithControlled extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -240,7 +240,7 @@ export const _RadioGroup = () => {
       </RadioGroup>
       <br />
       value+onchange
-      <RadioWithControled />
+      <RadioWithControlled />
       <br />
       联动
       <RadioGroup1 />

packages/semi-ui/rating/__test__/rating.test.js

@@ -85,7 +85,7 @@ describe('Rating', () => {
         expect(spyOnChange.calledWithMatch(1)).toBe(true);
     });
 
-    it('controled value', () => {
+    it('controlled value', () => {
         const R = getRating({ value: 2 });
         expect(R.state().value).toEqual(2);
         expect(R.find(`.${BASE_CLASS_PREFIX}-rating-star-full`).length).toEqual(2);

packages/semi-ui/select/__test__/select.test.js

@@ -20,7 +20,7 @@ function getOption(list = defaultList) {
 let commonProps = {
     // Select use Popup Layer to show candidate option,
     // but all Popup Layer which extends from Tooltip (eg Popover, Dropdown) have animation and delay.
-    // Turn off animation and delay during testing, to avoid wating (something like setTimeOut/balabala...) in the test code
+    // Turn off animation and delay during testing, to avoid waiting (something like setTimeOut/balabala...) in the test code
     motion: false,
     mouseEnterDelay: 0,
     mouseLeaveDelay: 0,
@@ -467,7 +467,7 @@ describe('Select', () => {
         const props = { disabled: true };
         const select = getSelect(props);
         expect(select.exists(`.${BASE_CLASS_PREFIX}-select-disabled`)).toEqual(true);
-        // Does not respond click events when disbaled is true
+        // Does not respond click events when disabled is true
         select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
         expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(false);
     });
@@ -559,7 +559,7 @@ describe('Select', () => {
         let scProps = {
             showClear: true,
             filter: true,
-            defaultValue: 'tikok',
+            defaultValue: 'tiktok',
         };
         const scSelect = getSelect(props);
     });
@@ -718,7 +718,7 @@ describe('Select', () => {
     });
 
     it('onDeselect', () => {
-        // trigger onDeselect when option is deselectd
+        // trigger onDeselect when option is deselected
         let onDeselect = (value, option) => {};
         let spyOnDeselect = sinon.spy(onDeselect);
         let props = {
@@ -916,7 +916,7 @@ describe('Select', () => {
     });
 
     it('【autoFocus】 & onBlur when autoFocus = true', () => {
-        // autoFocus should trigger onBlur when click ohter element directly （dropdown not open）
+        // autoFocus should trigger onBlur when click other element directly （dropdown not open）
         let spyOnBlur = sinon.spy((value, option) => {
         });
         let props = {
@@ -936,7 +936,7 @@ describe('Select', () => {
         expect(spyOnBlur.callCount).toEqual(1);
     });
 
-    it('vitrual', () => {
+    it('virtual', () => {
         let spyOnChange = sinon.spy((value) => {
         });
         let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
@@ -1048,7 +1048,7 @@ describe('Select', () => {
     it('customTrigger', () => {
         const triggerRender = ({ value, ...rest }) => {
             return (
-              <div className="custom-triger">
+              <div className="custom-trigger">
                 trigger
               </div>
             );
@@ -1057,7 +1057,7 @@ describe('Select', () => {
             triggerRender,
         };
         let select = getSelect(props);
-        let trigger = select.find('.custom-triger');
+        let trigger = select.find('.custom-trigger');
         expect(trigger.length).toEqual(1);
         expect(trigger.at(0).text()).toEqual('trigger');
         trigger.at(0).simulate('click')
@@ -1186,7 +1186,7 @@ describe('Select', () => {
         expect(singleSelect.state().selections.size).toEqual(0);
     });
 
-    it('props optionList update after choose some option, uncontroled mode', () => {
+    it('props optionList update after choose some option, uncontrolled mode', () => {
 
         let props = {
             defaultActiveFirstOption: true,
@@ -1234,7 +1234,7 @@ describe('Select', () => {
         expect(selections2[0][0]).toEqual('abc');
     });
 
-    it('click tag close when multiple, controled mode', () => {
+    it('click tag close when multiple, controlled mode', () => {
         let spyOnChange = sinon.spy((value) => {
         });
         let spyOnDeselect = sinon.spy((option) => {
@@ -1303,8 +1303,8 @@ describe('Select', () => {
         expect(inputValue).toEqual(keyword);
     });
     // TODO ref selectAll \deselectAll when onChangeWithObject is true
-    // TODO when loading is true, do not response any keyborard event
-    // TODO can't remove tag when option is diabled
+    // TODO when loading is true, do not response any keyboard event
+    // TODO can't remove tag when option is disabled
     // it('allowCreate-renderCreateItem', ()=>{})
     // it('autoAdjustOverflow', ()=>{})
     // it('remote', ()=>{})

packages/semi-ui/select/_story/select.stories.js

@@ -1183,7 +1183,7 @@ RenderSelectedItem.parameters =  {
   chromatic: { disableSnapshot: false },
 };
 
-const ControledSelect = () => {
+const ControlledSelect = () => {
   const [value, setValue] = useState('nick');
   const [value2, setValue2] = useState('jerry');
   const [value3, setValue3] = useState();
@@ -1277,13 +1277,13 @@ const ControledSelect = () => {
   );
 };
 
-export const Controlled = () => <ControledSelect></ControledSelect>;
+export const Controlled = () => <ControlledSelect></ControlledSelect>;
 
 Controlled.story = {
   name: 'controlled',
 };
 
-const UnControledSelect = () => {
+const UnControlledSelect = () => {
   const onChange = value => {
     console.log(value);
   };
@@ -1318,8 +1318,8 @@ const UnControledSelect = () => {
   );
 };
 
-export { UnControledSelect };
-UnControledSelect.story = {
+export { UnControlledSelect };
+UnControlledSelect.story = {
   name: '非受控组件'
 };
 
@@ -1800,7 +1800,7 @@ AllowCreateCustomRender.story = {
   name: 'allowCreate custom render',
 };
 
-let AllowCreateControledDemo = () => {
+let AllowCreateControlledDemo = () => {
   let [value, setValue] = useState();
   const optionList = [
     {

packages/semi-ui/steps/_story/steps.stories.js

@@ -199,12 +199,12 @@ class StepsDemo extends React.Component {
   }
 }
 
-export const StepsWithControled = () => {
+export const StepsWithControlled = () => {
   return <StepsDemo></StepsDemo>;
 };
 
-StepsWithControled.story = {
-  name: 'steps with controled',
+StepsWithControlled.story = {
+  name: 'steps with controlled',
 };
 
 class StepsWithonChange extends React.Component {

packages/semi-ui/switch/_story/switch.stories.js

@@ -65,17 +65,17 @@ SwitchDisabled.story = {
   name: 'switch disabled',
 };
 
-const ControledSwitch = () => {
+const ControlledSwitch = () => {
   const [checked, onChange] = useState(true);
   return <Switch checked={checked} onChange={(v, e) => onChange(v)} aria-label='power-switch'/>;
 };
-export const SwitchCheckedOnChange = () => <ControledSwitch />;
+export const SwitchCheckedOnChange = () => <ControlledSwitch />;
 
 SwitchCheckedOnChange.story = {
   name: 'switch checked + onChange',
 };
 
-const UnControledSwitch = () => {
+const UnControlledSwitch = () => {
   const onChange = checked => {
     console.log(checked);
   };
@@ -86,7 +86,7 @@ const UnControledSwitch = () => {
     </>
   );
 };
-export const SwitchDefaultCheckedOnChange = () => <UnControledSwitch />;
+export const SwitchDefaultCheckedOnChange = () => <UnControlledSwitch />;
 
 SwitchDefaultCheckedOnChange.story = {
   name: 'switch defaultChecked + onChange',

packages/semi-ui/switch/_story/switch.stories.tsx

@@ -57,15 +57,15 @@ stories.add('switch disabled', () => (
 ));
 
 
-const ControledSwitch = () => {
+const ControlledSwitch = () => {
     const [checked, onChange] = useState(true);
     return (
         <Switch checked={checked} onChange={(v, e) => onChange(v)} />
     );
 };
-stories.add('switch checked + onChange', () => <ControledSwitch/>);
+stories.add('switch checked + onChange', () => <ControlledSwitch/>);
 
-const UnControledSwitch = () => {
+const UnControlledSwitch = () => {
     const onChange = checked => {
         console.log(checked);
     };
@@ -76,7 +76,7 @@ const UnControledSwitch = () => {
         </>
     );
 };
-stories.add('switch defaultChecked + onChange', () => <UnControledSwitch/>);
+stories.add('switch defaultChecked + onChange', () => <UnControlledSwitch/>);
 
 class LoadingDemo extends React.Component {
     constructor(props) {

packages/semi-ui/transfer/_story/transfer.stories.js

@@ -195,7 +195,7 @@ TransferDraggableAndDisabled.story = {
 }
 
 
-const ControledTransfer = () => {
+const ControlledTransfer = () => {
   const [value, setValue] = useState([2, 3]);
 
   const handleChange = value => {
@@ -209,7 +209,7 @@ const ControledTransfer = () => {
   );
 };
 
-export const ControlledTransfer = () => <ControledTransfer />;
+export const ControlledTransfer = () => <ControlledTransfer />;
 
 ControlledTransfer.story = {
   name: '受控Transfer',

packages/semi-ui/upload/_story/upload.stories.js

@@ -311,7 +311,7 @@ DefaultFileList.story = {
   name: 'defaultFileList',
 };
 
-class ControledUpload extends React.Component {
+class ControlledUpload extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -344,7 +344,7 @@ class ControledUpload extends React.Component {
   }
 }
 
-export const ControlledFileList = () => <ControledUpload></ControledUpload>;
+export const ControlledFileList = () => <ControlledUpload></ControlledUpload>;
 
 ControlledFileList.story = {
   name: 'controlled fileList',