React（九）

yarn add eslint eslint-plugin-react

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser

{
  "extends": ["eslint:recommended","plugin:react/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["react","@typescript-eslint"],
  "rules": {
    "react/self-closing-comp": ["error"] //组件无内容时自闭合
  }
}

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

npm install stylelint-order --save-dev

module.exports = {
    "plugins": [
        "stylelint-order"
    ],
    "rules": {
        "order/properties-order": [
            "width",
            "height"
        ]
    }
}

npx mrm lint-staged

{
  "name": "My project",
  "version": "0.1.0",
  "scripts": {
    "my-custom-script": "linter --arg1 --arg2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js}": [
      "eslint --cache --fix",
      "prettier --write"
    ],
    "*.css": [
      "stylelint --cache --fix",
      "prettier --write"
    ]
  }
}

{
  "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
}

{
  "*.css": "stylelint",
  "*.scss": "stylelint --syntax=scss"
}

{
  "*.js": "eslint --fix"
}

npm install -g jsdoc

/**
 * Returns the sum of a and b
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function sum(a, b) {
    return a + b;
}
/**
 * Return the diff fo a and b
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function diff(a, b) {
    return a - b;
}

jsdoc doc.js

npm install @types/react -s
npm install @types/react-dom -s

import * as React from 'react'

interface IProps {
  color: string,
  size?: string
}
  
interface IState {
  count: number,
}

class App extends React.PureComponent<IProps, IState> {
  public readonly state: Readonly<IState> = {
    count: 1
  }
  public render () {
    return (
    	<div>Hello world</div>
    )
  }
  public componentDidMount () {
  }
}

import { MouseEvent } from 'react'

interface Iprops {
  onClick (event: MouseEvent<HTMLDivElement>): void,
}

import React from 'react';

export type EdgeTextProps = {
  style?: React.CSSProperties;
  color: React.CSSProperties['color'];
};

//泛型ts组件
function Foo<T>(props: Props<T>){
  return <div>{props.content}</div>
}

const App = () => {
  return (
  	<div className="App">
      <Foo content={42}></Foo>
      <Foo<string> content={"hello"}></Foo>
    </div>
  )
}
        
//普通ts组件
interface Props {
	content: string;          
}
        
function Foo(props: Props) {
	return <div>{props.content}</div>          
}
        
const App = () => {
  return (
  	<div className="App">
      // Type number not assignable to type string
      <Foo content={42}></Foo>
      <Foo<string> content={"hello"}></Foo>
    </div>
  )
}

npm install @loadable/component

import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

npm i react-media-recorder

import { ReactMediaRecorder } from "react-media-recorder";

const RecordView = () => (
  <div>
    <ReactMediaRecorder
      video
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaBlobUrl} controls autoPlay loop />
        </div>
      )}
    />
  </div>
);

import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
  } = useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <video src={mediaBlobUrl} controls autoPlay loop />
    </div>
  );
};

npm install three @react-three/fiber
##  如果使用ts还要安装ts包
npm install @types/three

/* eslint-disable */
import * as THREE from 'three'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'

function Box(props: JSX.IntrinsicElements['mesh']) {
  // This reference will give us direct access to the THREE.Mesh object
  const ref = useRef<THREE.Mesh>(null!)
  // Hold state for hovered and clicked events
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  // Rotate mesh every frame, this is outside of React without overhead
  useFrame((state, delta) => (ref.current.rotation.x += 0.01))

  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  )
}

 import React from 'react'
 // 导入包
 import PropTypes from 'prop-types'
 
 function About (props) {
   const { name, age } = props
   console.log(name, age)
     return (
       <div>
         <p>{ name }</p>
         <p>{ age }</p>
       </div>
     )
 }
 
 About.defaultProps = {
   name: 'ReoNa',
   age: 22
 }
 
 // 这里通过函数组件的 propTypes 属性设置类型校验
 // PropType.类型：规定传入类型
 // PropType.类型.isRequired：规定必须传入
 About.propTypes = {
   name: PropTypes.string.isRequired,
   age: PropTypes.number
 }
 
 export default About

npm i react-helmet

import {Helmet} from "react-helmet"

class Application extends React.Component {
  render(){
   return(
      <div className="application">
        <Helmet>
          <meta charSet="utf-8"/>
          <title>My title</title>
          <link rel="canonical" href="http://mysite.com/example" />
        </Helmet>
        <Child>
       			<Helmet>
                <title>new Title</title>
            </Helmet>
       </Child>
      </div>
   )
  }
}

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

npm install qrcode.react

<QRCode
  id="qrCode"
  value={"https://gongyi.m.jd.com/oneDetails.html?id=930"}
  imageSettings={{
    // 中间有图片logo
    src: `http://img13.360buyimg.com/imagetools/jfs/t1/203384/29/6713/37826/6142ef39E5f79ed2b/47200134bf8d0571.jpg`,
    height: 30,
    width: 30,
    excavate: true,
  }}
  size={99} // 二维码的大小
  fgColor="#000000" // 二维码的颜色
/>
//转换为图片
changeCanvasToPic = () => {
    const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
    const img = new Image();
    img.src = canvasImg.toDataURL('image/png'); 
// canvas.toDataUrl() 可以将canvas格式的文件转换成基于base64的指定格式的图片
// 注意这个api ie9以下不支持    
    const downLink = document.getElementById('down_link');
    downLink.href = img.src;
    downLink.download = '二维码'; //下载图片name
  };
//定时刷新
//定时刷新功能是使用 setInterval 定时更新 value 值来更新二维码，跳转地址后面拼上一个radomCode, radomCode定时更新，就实现二维码的刷新了，需要及时清理定时器。

npm install antd --save
cnpm i antd -S

@import '~antd/dist/antd.css';

import {  } from 'antd';

export declare type AlignType = 'left' | 'center' | 'right';

const columns = [{
  align: 'right',
}]

import { AlignType } from 'rc-table/lib/interface.d.ts';

columns: [{
  align: 'right' as 'right'
  // 或者 align: 'right' as AlignType
}]

const checkTipVisible = (visible: boolean) => {
  VisibleCrtl.toggle(!Boolean(enableCreatePlan) ? visible : false);
};

<Tooltip
  title={formatMessage({
    id: 'CREATE_OPERATING_PLAN_ERROR',
  })}
  visible={visible}
  onVisibleChange={checkTipVisible}
  >
</Tooltip>

<Form.Item shouldUpdate>
  {(form) => {
    const branches = form.getFieldValue('branches') || [];
    return (
      <>
      <Form.List name="branches">
        {(fields, operation) => {
          return (
            <BranchSortTable
              readonly={readonly}
              data={branches}
              fields={fields}
              operation={operation}
              />
          );
        }}
      </Form.List>
      </>
    );
  }}
</Form.Item>

const handleSubmit = async () => {
  await form.validateFields();
}

<ProFormText
  readonly={readOnly}
  label={
    <Text
      style={{ maxWidth: 110 }}
      ellipsis={{
        tooltip: formatMessage({ id: 'FORM_LABEL_NODE_NAME' }),
      }}
      >
      {formatMessage({ id: 'FORM_LABEL_NODE_NAME' })}
    </Text>
  }
  required
  validateFirst
  name="name"
  rules={[
    {
      required: true,
      message: formatMessage({
        id: 'FORM_LABEL_PLACEHOLDER_INPUT',
      }),
    },
    {
      validator: async (_rule, value) => {
        if (!validateNameUnique(value, element.id)) {
          throw formatMessage({
            id: 'AUTO_FLOW_NAME_UNIQ_ERROR_MESSAGE',
          });
        }
      },
    },
  ]}
  fieldProps={{
    placeholder: formatMessage({
      id: 'AUTO_FLOW_LIMIT_CHAR_LENGTH_MESSAGE',
    }),
  }}
  />

<Form.Item
  name={['a', 'select']}
  options={listData as treeItemType[]}
  readonly={isView}
>
</Form.Item>
<Form.Item
  name={['a', 'input']}
  options={listData as treeItemType[]}
  readonly={isView}
>
</Form.Item>

['1', '2','3'].map((index)=> {
  <Form.Item
    name={['a', 'select', index]}
    options={listData as treeItemType[]}
    readonly={isView}
  >
  </Form.Item>
})

const handleChange = () => {
  labelsForm.setFieldsValue({
    tree: []
  });
}

const FormTree: React.FC<{ value?: any }> = (value) => {
  return (
    <Tree
      isDirectoryTree
      searchAble
      searchingMode="filter"
      treeData={value.value || []}
      onSelect={(selectKey, info) => {
        setSelectId({ key: selectKey, title: info?.node.title });
                    }}
      />
  );
};

<ProForm.Item name="tree" noStyle shouldUpdate>
  <FormTree />
</ProForm.Item>

import React from 'react';
import { Form, Input, InputNumber, Typography } from 'antd';

const Demo = () => {
  const [form] = Form.useForm<{ name: string; age: number }>();
  const nameValue = Form.useWatch('name', form);

  return (
    <>
      <Form form={form} layout="vertical" autoComplete="off">
        <Form.Item name="name" label="Name (Watch to trigger rerender)">
          <Input />
        </Form.Item>
        <Form.Item name="age" label="Age (Not Watch)">
          <InputNumber />
        </Form.Item>
      </Form>

      <Typography>
        <pre>Name Value: {nameValue}</pre>
      </Typography>
    </>
  );
};

export default Demo;

<Form.Item
  label="Field B"
  tooltip={{ title: 'Tooltip with customize icon', icon: <InfoCircleOutlined /> }}
  >
  <Input placeholder="input placeholder" />
</Form.Item>

const app = () => {
  if(state) {
		return <div />
  }
  
  return <Form.Item initialValue='1'> <input /> </Form.Item>
}

const [modal, contextHolder] = Modal.useModal();

modal.info({
  title: null,
  icon: null,
  okText: formatMessage({ id: 'ACTION_CONFIRM' }),
  className: styles.deleteCheckModal,
  content: (
    <div>
      <div className={styles.deleteCheckModalTitle}>
        {formatMessage({ id: 'TIPS' })}
      </div>
      <div className={styles.deleteCheckModalTips}>
        <InfoCircleFilled className="mr-6" />
        {formatMessage({ id: 'CANOT_DELETE_TIPS' })}
      </div>
      <div className={styles.deleteCheckModalTable}>
        <ProTable
          pagination={false}
          scroll={{ y: 200 }}
          size="small"
          dataSource={data}
          >
          <ProTable.Column title="ID" dataIndex="id" width={100} />
          <ProTable.Column
            title={formatMessage({ id: 'PLAN_NAME' })}
            dataIndex="name"
            />
        </ProTable>
      </div>
    </div>
  ),
});

return (
	<>{contextHolder}</>
)

const [Key, setKey] = useState(
  `${+new Date()}`,
);
// ref相关的事件改变时也要reset key，防止拿不到
const handleChange = () => {
  setKey(() => `${+new Date()}`);
};
<Modal
  visible={visible}
  form={modalForm}
  title={formatMessage({
    id: 'ATTACHMENT_ADD',
  })}
  modalProps={{
    onCancel: () => {
      setVisible(false);
    },
  }}
  onVisibleChange={(visible) => {
    if (visible) {
      // 当modal打开后强制渲染一次 RichTextInput 否则获取不到ref
      setTimeout(() => {
        setImageAddressInputKey(() => `${+new Date()}`);
      }, 0);
    }
  }}>
</ModalForm>

// components/modal/confirm.tsx
  function render({ okText, cancelText, prefixCls: customizePrefixCls, ...props }: any) {
    /**
     * https://github.com/ant-design/ant-design/issues/23623
     *
     * Sync render blocks React event. Let's make this async.
     */
    setTimeout(() => {
      const runtimeLocale = getConfirmLocale();
      const { getPrefixCls, getIconPrefixCls } = globalConfig();
      // because Modal.config  set rootPrefixCls, which is different from other components
      const rootPrefixCls = getPrefixCls(undefined, getRootPrefixCls());
      const prefixCls = customizePrefixCls || `${rootPrefixCls}-modal`;
      const iconPrefixCls = getIconPrefixCls();

      reactRender(
        <ConfirmDialog
          {...props}
          prefixCls={prefixCls}
          rootPrefixCls={rootPrefixCls}
          iconPrefixCls={iconPrefixCls}
          okText={okText || (props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText)}
          cancelText={cancelText || runtimeLocale.cancelText}
        />,
        container,
      );
    });
  }

export const useCustomModal = () => {
  const { formatMessage } = useIntl();
  const [modal, contextHolder] = Modal.useModal();
  
  const showModal = (props: showModalProps) => {
    const { tip, okText, onOk, className } = props;
    
    modal.info({
      title: null,
      icon: null,
      okText: okText ?? formatMessage('ACTION_CONFIRM'),
      className: className,
      content: (
        <div className={styles.quotePlanModal}>
          {data}
        </div>
      ),
      onOk: () => {
        onOk?.();
      },
    });
  }
	return [showModal, contextHolder];
}

<Select
getPopupContainer={(triggerNode) =>triggerNode.parentNode}
  />

import Schema from 'async-validator';
const descriptor = {
  name: {
    type: 'string',
    required: true,
    validator: (rule, value) => value === 'muji',
  },
  age: {
    type: 'number',
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');  // reject with error message
        } else {
          resolve();
        }
      });
    },
  },
};
const validator = new Schema(descriptor);
validator.validate({ name: 'muji' }, (errors, fields) => {
  if (errors) {
    // validation failed, errors is an array of all errors
    // fields is an object keyed by field name with an array of
    // errors per field
    return handleErrors(errors, fields);
  }
  // validation passed
});

// PROMISE USAGE
validator.validate({ name: 'muji', age: 16 }).then(() => {
  // validation passed or without error message
}).catch(({ errors, fields }) => {
  return handleErrors(errors, fields);
});

yarn add scroll-into-view-if-needed

import scrollIntoView from 'scroll-into-view-if-needed'
const node = document.getElementById('hero')

scrollIntoView(node, {
  // Your scroll actions will always be an array, even if there is nothing to scroll
  behavior: actions =>
    // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
    actions.forEach(({ el, top, left }) => {
      // implement the scroll anyway you want
      el.scrollTop = top
      el.scrollLeft = left

      // If you need the relative scroll coordinates, for things like window.scrollBy style logic or whatever, just do the math
      const offsetTop = el.scrollTop - top
      const offsetLeft = el.scrollLeft - left
    }),
  // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)
})

npm install react-resizable --save

import React, { PureComponent } from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
 
 
const ResizeableTitle = (props: { [x: string]: any; onResize: any; width: any; }) => {
  const { onResize, width, ...restProps } = props;
  if (!width) {
    return <th {...restProps} />
  }
  return (
    <Resizable width={width} height={0} onResize={onResize} draggableOpts={{ enableUserSelectHack: false }}>
      <th {...restProps} />
    </ Resizable >
  )
}
 
class TableResize extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
  }
  state = {
    columns: this.props.columns
  };
 
  components = {
    header: {
      cell: ResizeableTitle,
    },
  };
 
  handleResize = (index: number) => (e: any, { size }: any) => {
    this.setState(({ columns }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      return { columns: nextColumns };
    });
  };
 
  render() {
    const columns = this.state.columns.map((col: any, index: number) => ({
      ...col,
      onHeaderCell: (column: { width: any; }) => ({
        width: column.width,
        onResize: this.handleResize(index),
      }),
    }));
 
    return <Table
      components={this.components}
      columns={columns}
      rowKey="id"
      border                                  // 不要这个属性也有拖拽表示
      pagination={false}
      rowSelection={this.props.rowSelection}  // 选中行的事件，不需要可删除
      dataSource={this.props.dataSource}      
      onChange={(pagination: any, filters: any) => this.props.handleTableChange(pagination, filters)} /> //表格筛选功能触发的事件，不需要可删除
  }
}
 
export default TableResize

import TableReszie from '@components/TableResize'

<TableReszie
  dataSource={dataSource}
  columns={columns}
  loading={loading}
  handleTableChange={handleTableChange}
/>

npm i simple-react-draggable

import Draggable from 'simple-react-draggable';
const list = [{
  id: 1,
  name: '测试1'
},{
  id: 2,
  name: '测试2'
},{
  id: 3,
  name: '测试3'
},{
  id: 4,
  name: '测试4'
},{
  id: 5,
  name: '测试6'
},{
  id: 7,
  name: '测试7'
}];

<Draggable list={list}/>

<ProFormText
  width="md"
  name="name"
  label="签约客户名称"
  tooltip="最长为 24 位"
  placeholder="请输入名称"
  />
<ProFormDateRangePicker name="contractTime" label="合同生效时间" />
<ProFormSelect
  width="xs"
  options={[
    {
      value: 'time',
      label: '履行完终止',
    },
  ]}
  name="unusedMode"
  label="合同约定失效效方式"
  />

$ npm i react-query
# or
$ yarn add react-query

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from 'react-query'
import { getTodos, postTodo } from '../my-api'

// 创建一个 client
const queryClient = new QueryClient()

function App() {
  return (
    // 提供 client 至 App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // 访问 client
  const queryClient = useQueryClient()

  // 查询
  const query = useQuery('todos', getTodos)

  // 修改
  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // 错误处理和刷新
      queryClient.invalidateQueries('todos')
    },
  })

  return (
    <div>
      <ul>
        {query.data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

render(<App />, document.getElementById('root'))

import { ReactQueryDevtools } from 'react-query/devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

import 'h5ds/editor/style.css';

import React, { Component } from 'react';
import H5dsEditor from 'h5ds/editor';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  /**
   * 保存APP
   */
  saveApp = async data => {
    console.log('saveApp ->', data);
  };

  /**
   * 发布 app
   */
  publishApp = async data => {
    console.log('publishApp ->', data);
  };

  componentDidMount() {
    // 模拟异步加载数，设置 defaultData 会默认加载一个初始化数据
    setTimeout(() => {
      this.setState({ data: 'defaultData' });
    }, 100);
  }

  /**
   * 使用编辑器部分
   */
  render() {
    const { data } = this.state;
    return (
      <H5dsEditor
        plugins={[]} // 第三方插件包
        data={data}
        options={{
          publishApp: this.publishApp,
          saveApp: this.saveApp, // 保存应用
          appId: 'test_app_id' // 当前appId
        }}
      />
    );
  }
}
export default Editor;